Vue项目中动态绑定img的:src属性后出现资源加载404问题求助

这个问题其实是Vue项目里webpack资源处理的常见坑——当你硬写<img src="./assets/xxx.gif">时，webpack会在构建阶段自动识别这个资源路径，把它转换成打包后正确的文件路径。但你把路径存在data的字符串数组里时，webpack没法把这些字符串识别为资源引用，所以不会处理它们，浏览器就直接请求你写的原始相对路径，自然就找不到文件了。

给你几个靠谱的解决办法：

方法1：用require()包裹图片路径 #

修改data里的images数组，给每个路径加上require()，这样webpack会把这些图片当作模块处理，自动解析正确的路径：

export default {
  name: 'App',
  data() {
    return {
      selectedImage: 0,
      images: [
        require('./assets/Option01.gif'),
        require('./assets/Option02.gif'),
        require('./assets/Option03.gif'),
        require('./assets/Option04.gif'),
        require('./assets/Option05.gif')
      ]
    }
  },
  computed: {
    image(){
      return this.images[this.selectedImage]
    }
  }
}

这样computed返回的image就是webpack处理后的正确资源路径，浏览器就能正常加载图片了。

方法2：把图片放到public目录（Vue CLI 3+适用） #

如果你的项目用的是Vue CLI 3或更高版本，可以把图片移到项目根目录的public/assets文件夹下（没有的话自己创建），然后把路径改成根相对路径：

images: [
  '/assets/Option01.gif',
  '/assets/Option02.gif',
  '/assets/Option03.gif',
  '/assets/Option04.gif',
  '/assets/Option05.gif'
]

public目录下的资源会被直接拷贝到打包后的根目录，不需要webpack处理，所以直接用根相对路径就能访问到。

方法3：动态拼接路径并require（适合文件名有规律的情况） #

如果你的图片命名是有规律的（比如Option01到Option05），可以直接在computed里动态拼接路径并使用require，这样不用维护images数组：

export default {
  name: 'App',
  data() {
    return {
      selectedImage: 0
    }
  },
  computed: {
    image(){
      // 注意模板字符串的使用，selectedImage从0开始，所以加1对应Option01到Option05
      return require(`./assets/Option0${this.selectedImage + 1}.gif`)
    }
  }
}

个人最推荐方法1，它能让webpack统一处理资源，也更符合Vue项目的资源管理规范。

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