时间戳

首页 > 解决方案 > v-bind:src 图片返回 null，VUE 3 + DatoCMS

vuejs3 - v-bind:src 图片返回 null，VUE 3 + DatoCMS

问题描述

所以我有一个名为“image”的组件，它是从另一个名为“article”的组件导入的。imageCover 不是必需的，用户可以提供也可以不提供。因此，我收到错误“ncaught (in promise) TypeError: Cannot read property 'url' of null”，并且没有呈现没有图像的文章。

我尝试（在两个组件中）添加一个 v-if="imageURL" 并放在数据 imageURL:null 下，我得到的是文本已呈现，但有图像的文章不再呈现。所以我添加了一个“！imageURL”，但后来我又回到了开头。

不知道我没有看到什么，看起来很简单，但似乎没有。我在 dato 上进行了审查，只是检查图像数据不是必需的，从 dato 方面来看，它似乎还可以，或者至少我认为。

在这里你可以看到我的文章组件

<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>

现在这里是我的图像组件

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

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

预先感谢您的帮助 ：）

标签： vuejs3datocms

解决方案

问题可能就在这里

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

如果article.imageUrl为空，article.imageUrl.url会抛出错误，因为你无法从 undefined ( undefined.url)获取 url

您应该在定位对象属性之前检查该值是否为空

有几种选择，但我只提几个。

#1article.imageUrl使用 v-if 检查是否为空

TBH< 这是我最不喜欢的，因为从这个定义中不清楚 v-if 是在 imageUrl 道具之前还是之后处理的，所以为了清楚起见，它得到了一个。但更重要的是，它不会渲染组件，这可能是也可能不是预期的行为。

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

#2 逻辑或三进制传递 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 可选链接

usingobject?.prop类似于object && object.prop并将其添加到两个对象中可以更安全地使用article?.imageUrl?.url（尽管不是必需的）

更多信息

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

但是，事件认为这是 ES2020 语法，所有常青浏览器都支持它，而 Vue3 放弃了对 IE11 的支持，你应该使用它。

推荐阅读