v-bind:src image returning null, VUE 3 + DatoCMS

Question

So I have a component called "image", which is imported from another component called "article". The imageCover is not required so, the user can provide it or not. So I'm getting the error "ncaught (in promise) TypeError: Cannot read property 'url' of null" and the articles that don't have an image are not being rendered.

I tried (in both components) to add a v-if="imageURL" and put under data imageURL:null, what I get is the text is render but the articles who have an image are not render anymore. So I added a "!imageURL" instead, but then I went back to the beginning.

Not sure what I'm not seeing, looked simple but it seems no. I reviewed on dato just checking the image data was not required and from dato side it seems to be okay or at least I think.

Here you can see my article component

<template>
  <div id="w-node-_52c4cf53-08cb-22e4-8818-0dbbacb46b70-3759ffab">
    <article-cover-img :imageURL="article.imageUrl.url"></article-cover-img>

    <h4 class="s-m-t-32">
      <article-title :articleTitle="article.articleTitle"></article-title>
    </h4>

    <div class="paragraph-medium" v-html="article.articleContent"></div>
    <br />
    <div id="w-node-_4ae8992e-0086-2e16-a92f-a86ff611a958-3759ffab">
      <article-tag :articleTags="article.articleTags"></article-tag>
    </div>
    <br />
    <div id="w-node-_9ede0771-d38b-4b24-691f-998db4595b94-3759ffab">
      <article-fav></article-fav>
    </div>
  </div>
</template>

<script>
  import ArticleTitle from '../elements/title.vue'
  import ArticleCoverImg from '../elements/image.vue'
  import ArticleTag from '../elements/tag.vue'
  import ArticleFav from '../elements/favorites.vue'

  export default {
    components: {
      ArticleTitle,
      ArticleTag,
      ArticleCoverImg,
      ArticleFav,
    },
    props: {
      article: Object,
    },
  }
</script>

And here my image component for now

<template>
  <img class="image" v-bind:src="imageURL" />
</template>

<script>
  export default {
    props: {
      imageURL: {
        type: String,
      },
    },
  }
</script>

Thank you in advance for your help :)

Answer 1

the issue is likely right here

<article-cover-img :imageURL="article.imageUrl.url"> </article-cover-img>

if article.imageUrl is null, article.imageUrl.url will throw an error, because you can't get the url from undefined (undefined.url)

You should check if the value is null before targeting the object property

There are several options, but I'll just mention a few.

#1 Check if article.imageUrl is null using a v-if

TBH< this is my least favorite, as it's unclear from this definition whether the v-if is processed before or after the imageUrl prop, so it gets a for clarity. But more importantly, it will not render the component, which may or may not be the intended behaviour.

<article-cover-img v-if="article.imageUrl" :imageURL="article.imageUrl.url"
></article-cover-img>

#2 Logical or ternary to pass null

<article-cover-img :imageURL="article.imageUrl && article.imageUrl.url"
></article-cover-img><!-- logical -->
<article-cover-img :imageURL="!!article.imageUrl ? article.imageUrl.url : null"
></article-cover-img><!-- ternary -->

#3 Optional chaining

using object?.prop is similar to object && object.prop and adding it to both objects makes for even safer use article?.imageUrl?.url (though it's not necessary)

more info

<article-cover-img :imageURL="article?.imageUrl?.url"></article-cover-img>

However, event thought this is ES2020 syntax, all evergreen browsers support it and Vue3 dropped support for IE11, you should be to use it.