Vue.js动态图片绑定问题求助：Vue-CLI3+Webpack4环境下无法绑定图片

安全阿岳

2026-5-25

解决Vue CLI 3 + Webpack 4动态图片绑定失败的问题

嘿，我之前在Vue CLI 3项目里也踩过这个坑！直接用字符串拼接../public/images/这种相对路径绑定图片是行不通的，这和Webpack对静态资源的处理逻辑有关，咱们来一步步解决：

核心原因：public目录的资源处理规则

Vue CLI的public目录是静态资源的“逃生舱”——这里的文件会被直接复制到打包后的dist根目录，不会经过Webpack的编译处理。所以你写的../public/images/路径，在打包后就失效了，因为项目结构已经变成了dist作为根目录，图片实际在dist/images/下。

解决方案1：使用根路径绑定（推荐，针对public目录）

直接把基础路径改成以/开头的根路径，这样无论组件在哪个层级，都能正确指向dist/images/下的图片：

<div id="app">
  <div v-for="item in items" :key="item.name">
    {{ item.name }}
    <img :src="'/images/' + item.img">
  </div>
</div>

也可以把基础路径抽成变量，让代码更清晰：

// 在Vue组件的data或者Vuex的state里定义
baseImgPath: '/images/'

然后绑定：

<img :src="baseImgPath + item.img">

解决方案2：移到src/assets目录并使用require导入

如果你愿意把图片放到src/assets/images/下（Webpack会处理这些资源，比如压缩、哈希命名），那需要用require()来动态导入，因为Webpack无法识别字符串拼接的路径：

<div id="app">
  <div v-for="item in items" :key="item.name">
    {{ item.name }}
    <img :src="require(`@/assets/images/${item.img}`)">
  </div>
</div>

这里的@是Vue CLI默认配置的src目录别名，用起来更方便。