v-for循环渲染图片本地正常，生产环境报url空值错误且多图仅加载1张如何解决

根因分析 #

• 代码存在语法错误，:style 绑定的字符串模板、括号闭合逻辑有误
• 生产环境返回的 items 数组中，存在部分条目 cover_media 字段为 null 的情况，本地测试数据刚好全部覆盖了有效字段所以未触发报错
• 单条数据正常、多条报错的原因是第一条数据的 cover_media 为有效值，后续条目存在空值，渲染到空值条目时触发类型错误

修复步骤 #

方案1：保留所有条目，加空值兜底 #

根据你使用的Vue版本选择对应写法：

Vue 3 版本（支持可选链语法）

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

说明：?. 可选链会在cover_media为空时直接返回undefined，?? 空值合并运算符会在左侧值为空时返回后面的默认占位图地址，避免空值报错。如果不需要占位图，可以把默认值替换为'none'。

Vue 2 版本（不支持可选链语法）

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

方案2：直接过滤无封面的条目 #

如果不需要展示无封面的条目，可以直接在遍历源做过滤，从根源避免空值触发报错：

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

内容的提问来源于stack exchange，提问作者Dave