Vue.js绑定本地JSON文件图片路径失败，求排查及解决方法

嘿，我来帮你排查并解决这个图片加载的问题！你遇到的情况主要是Vue项目里Webpack处理静态资源的机制导致的，咱们一步步理顺：

先说说你当前操作的两个问题 #

1. 动态路径不被Webpack识别
   你用字符串拼接'../assets'+d.image的方式生成图片路径，Webpack在打包时没法把这个动态拼接的字符串识别为静态资源路径，也就不会对图片做打包处理（比如复制到输出目录、生成哈希文件名等）。浏览器最终请求的是你拼接的这个原始路径，但打包后的项目里这个路径根本不存在，所以图片加载失败。

2. v-for的位置和key值有误
   你把v-for写在<ul>标签上，这会循环生成多个<ul>元素，而不是在列表里生成多个<li>；另外你的JSON数据里没有name字段，用:key="d.name"会导致key值无效，控制台大概率会报错。

两种解决方案，任选其一就行 #

方案一：让Webpack正确解析图片路径

在引入JSON数据后，手动遍历处理每个项的图片路径，用require()来加载图片，这样Webpack就能识别并处理这些静态资源：

// 组件脚本部分（以Vue3为例）
import { ref } from 'vue';
// 引入原始JSON数据
const rawData = require('../assets/pets-data.json');
// 处理每个数据项的图片路径
const data = ref(rawData.map(item => ({
  ...item,
  // 用require加载图片，Webpack会自动处理路径
  image: require(`../assets${item.image}`)
})));

然后模板部分修正v-for位置和key：

<ul>
  <li v-for="d in data" :key="d.image">
    <img :src="d.image" alt="宠物图片">
  </li>
</ul>

方案二：把图片放到public目录下（更简单）

Vue项目根目录的public文件夹下的资源会被Webpack原样复制到打包后的根目录，不需要额外处理。你可以：

1. 把slider-first.jpg移到public/img目录下（没有img文件夹就新建一个）；
2. 模板部分直接用JSON里的路径，不需要拼接：

<ul>
  <li v-for="d in data" :key="d.image">
    <img :src="d.image" alt="宠物图片">
  </li>
</ul>

这样浏览器会直接请求根路径下的/img/slider-first.jpg，和打包后的资源路径匹配，就能正常加载了。

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