图像不会从 v-for 循环加载答案

【问题标题】：Images wont load from v-for loop图像不会从 v-for 循环加载
【发布时间】：2021-11-20 07:28:18
【问题描述】：

我在 html 中有 v-for 循环，在我的本地主机中一切正常，但是每当我部署到生产环境时，我都会收到此错误 TypeError: Cannot read property 'url' of null ，即使 url 存在于对象中。

<div v-for="item in items" :key="item.id">
<div :style="{ backgroundImage: (`url(${item.cover_media.url}`)}")></div>
</div>

我正在尝试使用此解决方案：https://stackoverflow.com/a/54591429/16897778

这是我唯一拥有的物品，您可以看到图片已加载

但控制台仍然抛出并且每当我添加更多项目时，它无法获取超过 1 个。我该如何解决这个问题？

【问题讨论】：

您的 item 或 cover_media 属性似乎是 null。您是否使用开发工具验证了这些不为空？
我认为问题是组件在 cover_media 出现之前呈现，我如何确保 url 会在它存在时加载？
确保每个项目的cover_media 值不为空。如果不确定，请改用item.cover_media?.url。
@ruoyanli 它不会返回 undefined 并且不加载项目吗？
AFAIR vue 对象属性是反应式的；一开始它不会加载任何内容，然后在.url 发生更改时更新值。

标签： vue.js vuejs2 vuejs3

【解决方案1】：

如果您担心组件在获取 cover_media 之前呈现，您可以为 url 提供默认值，如下所示：

<div v-for="item in items" :key="item.id">
    <div :style="{ backgroundImage: (`url(${item?.cover_media?.url || default_image_url}`)}")></div>
</div>

所以默认图片会被加载，一旦图片加载，它会变成item?.cover_media?.url中的url

您可以做的另一件事是仅在获取数据后加载该元素。

你可以很容易地做到这一点，但这里有一个简单的摘录：

<template v-if="fetched">
    <div v-for="item in items" :key="item.id">
        <div :style="{ backgroundImage: (`url(${item?.cover_media?.url}`)}")></div>
    </div>
</template>

<script>
data() {
   return {
      fetched: false,
      items: []
   }
},
methods: {
    fetchImages() {
        const response = await executeGetRequest()

        if (response.status === 200) {
            this.items = response.data.items;
            this.fetched = true
        }
    }
}
</script>

PS。我在吃香蕉的时候看到这个问题，注意到你的用户名，所以我很想回答这个问题哈哈

【讨论】：

【解决方案2】：

我遇到了这个问题。您可以使用以下代码作为示例：

‍‍‍‍‍‍:style="{ 'background-image': 'url(' + item.cover_media.url + ')' }"

【讨论】：