Vue项目：从db.json加载图片，商品详情页渲染失败求助

问题原因 #

1. 路径解析错误：首页使用根路径别名@定位图片资源，而详情页使用相对路径../，由于组件目录层级差异，相对路径会导致资源定位失败。
2. 异步数据加载时机问题：详情页初始时product为空对象，product.image未定义，直接传入require会触发加载错误，即使后续数据加载完成，错误已产生无法自动恢复。

修复步骤 #

1. 统一使用根路径别名替换相对路径 #

将详情页中的图片路径从相对路径改为根路径别名@，确保无论组件位置如何，都能正确指向src/assets/images目录：

<!-- 修改前 -->
<img :src="require(`../assets/images/${product.image}`)" />

<!-- 修改后 -->
<img :src="require(`@/assets/images/${product.image}`)" />

2. 增加数据加载判断，避免空值报错 #

在图片标签上添加v-if判断，确保product.image存在时再渲染图片，防止初始阶段的undefined传入require：

<img v-if="product.image" :src="require(`@/assets/images/${product.image}`)" alt="Product Image" />

3. 可选：使用计算属性处理图片路径 #

如果需要更灵活的路径处理，可以通过计算属性封装图片加载逻辑，同时处理空值情况：

<template>
  <!-- 模板中使用计算属性 -->
  <img :src="productImage" alt="Product Image" />
</template>

<script>
export default {
  // ...其他代码
  computed: {
    productImage() {
      // 当image字段存在时才加载资源，否则返回空字符串
      return this.product.image ? require(`@/assets/images/${this.product.image}`) : ''
    }
  }
}
</script>

验证要点 #

• 确认项目中已配置@别名指向src目录（Vue CLI项目默认已配置）
• 检查src/assets/images目录下是否存在f1.jpg、f2.jpg等对应图片文件
• 查看浏览器控制台是否有资源加载错误，根据提示排查路径问题

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