Vue.js商品详情页无法从JSON加载图片问题求助

问题原因 #

1. 初始状态路径错误：组件挂载时异步请求未完成，product初始为空对象，此时require(../assets/images/${product.image})会解析为require('../assets/images/undefined')，导致无效路径。
2. Webpack动态解析限制：Webpack需在编译时确定静态资源范围，若动态路径无固定前缀，可能无法正确识别并打包目标图片。

解决方案 #

方案1：模板中添加条件判断 #

在<img>标签中增加存在性判断，避免product.image未加载时的错误：

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

方案2：使用计算属性封装加载逻辑（推荐） #

通过计算属性统一处理图片路径，还能捕获图片不存在的异常：

<template>
  <img :src="productImage" alt="Product image" />
</template>

<script>
import Header from "./Header";
import axios from "axios";
import Footer from "./Footer";

export default {
  name: "ProductDetail",
  components: { Header, Footer },
  data() {
    return { product: {} };
  },
  async mounted() {
    let result = await axios.get(`http://localhost:3000/products/${this.$route.params.id}`);
    this.product = result.data;
  },
  computed: {
    productImage() {
      if (!this.product.image) return "";
      try {
        // 固定前缀让Webpack识别资源目录
        return require(`../assets/images/${this.product.image}`);
      } catch (err) {
        console.error(`图片不存在：${this.product.image}`);
        return "";
      }
    }
  }
};
</script>

方案3：移至public目录（备选） #

若无需Webpack处理图片，可将图片放入public/images，直接使用绝对路径：

<img :src="`/images/${product.image}`" alt="Product image" />

额外检查项 #

• 确认assets/images下存在f1.jpg、f2.jpg，文件名大小写与JSON完全一致。
• 核对组件与assets目录的相对路径：若组件在src/components下，../assets/images层级正确。

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