Vue读取JSON中的图片路径后图片无法正常渲染如何解决？

数据老陈

2026-10-4

问题根因

Vue项目编译时，只有写在模版src属性里、或者被require/import显式引入的assets目录下的静态资源，才会被打包工具（webpack/vite）处理，替换为最终的可访问路径。你写在JSON里的相对路径不会被打包工具识别，浏览器会直接以当前页面URL为基准拼接相对路径，自然找不到资源。
另外你提到绑定thumbnail字段却输出了gallery的路径，优先检查你代码里的data变量赋值是否正确，打印data.images确认字段映射无误。

解决方案

方案1：将图片资源迁移到public目录
把assets下的starry-night整个文件夹移动到项目根目录的public文件夹下，修改JSON里的路径为绝对路径：
```
"images": {
  "thumbnail": "/starry-night/thumbnail.jpg",
  "hero": {
    "small": "/starry-night/hero-small.jpg",
    "large": "/starry-night/hero-large.jpg"
  },
  "gallery": "/starry-night/gallery.jpg"
}
```
无需修改模版绑定代码，public目录下的资源会直接被映射到站点根路径，可直接访问。
方案2：保留在assets目录，显式引入资源
如果你不想把资源放到public，需要在绑定路径时添加打包工具识别的引入逻辑：
- 如果是webpack构建的Vue项目：
```
<img
  :src="require(`@/assets/starry-night/${data.images.thumbnail.split('/').pop()}`)"
  alt=""
  height="100px"
  width="100px"
/>
```
  也可以直接修改JSON里的路径为文件名，省去字符串截取的步骤，require里必须包含固定的路径前缀，webpack才会提前打包对应目录下的资源。
- 如果是vite构建的Vue项目：
```
<img
  :src="new URL(`../assets/starry-night/${data.images.thumbnail.split('/').pop()}`, import.meta.url).href"
  alt=""
  height="100px"
  width="100px"
/>
```
方案3：history路由模式部署适配
如果你本地开发可以正常加载，部署到服务器后才出现路径错误，且你用了vue-router的history模式，需要给服务器配置URL重写规则，把所有页面请求都重定向到index.html即可。