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

Posted 2023-02-16

【中文标题】图像不会从 v-for 循环加载

【英文标题】：Images wont load from v-for loop

【发布时间】：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://***.com/a/54591429/16897778

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

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

【问题讨论】：

您的 item 或 cover_media 属性似乎是 null。您是否使用开发工具验证了这些不为空？

我认为问题是组件在 cover_media 出现之前呈现，我如何确保 url 会在它存在时加载？

确保每个项目的cover_media 值不为空。如果不确定，请改用item.cover_media?.url。

@ruoyanli 它不会返回 undefined 并且不加载项目吗？

AFAIR vue 对象属性是反应式的；一开始它不会加载任何内容，然后在.url 发生更改时更新值。

【参考方案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 + ')' "