Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'path')

My images arent displayed and Im getting error from the title. This is my code:

<theme-card
    v-for="theme in themes"
    :router-link="`/theme/${theme.slug}`"
    :key="theme.id"
    :name="theme.name"
    :tags="theme.tags"
    :id="theme.id"
    :imgPath="theme.image.path"
></theme-card>


this is my get request

    async getThemes() {
            await axios
                .get('api')
                .then((response) => (this.themes = response.data.data))
        },

then in mounted:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

async mounted() {
        await this.getThemes()
}

in Theme card I receive img path as prop

<img :src="`${imgPath}`" alt="theme-img" height="80" />

everything works without an image, so my get request and v-for works, only theme.image.path doesnt work and i dont know why, im using vue and ionic

>Solution :

It seems that theme.image is not defined for some cases. To still display the list, simply use:

<theme-card
    v-for="theme in themes"
    :router-link="`/theme/${theme.slug}`"
    :key="theme.id"
    :name="theme.name"
    :tags="theme.tags"
    :id="theme.id"
    :image="theme.image"
></theme-card>

and then v-if to conditionally display the image

<img v-if="image" :src="`${image.path}`" alt="theme-img" height="80" />
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading