Vue.js动态加载图片src出现404错误的问题求助

直接把路径字符串绑定到:src上会触发404，核心原因是webpack编译时不会解析动态绑定的纯字符串路径，最终浏览器请求的是原字面量路径，而非打包后实际的资源路径。以下是几种可行的解决方式：

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

在data中定义路径时，通过require()让webpack提前解析资源路径：

export default {
  data () {
    return {
      imageSrc: require('@/assets/gallery/images/20211005_0044.jpg')
    }
  }
}

如果需要切换多张图片，可把所有路径用require()处理后存入数组，切换时直接取数组项：

data () {
  return {
    imageList: [
      require('@/assets/gallery/images/20211005_0044.jpg'),
      require('@/assets/gallery/images/other-img.jpg')
    ],
    currentImgIndex: 0
  }
},
computed: {
  imageSrc () {
    return this.imageList[this.currentImgIndex]
  }
}

方法2：处理动态文件名 #

如果图片文件名是变量生成的，可使用require()的模板字符串形式，必须保留固定的目录前缀，确保webpack能预编译该目录下的资源：

data () {
  return {
    fileName: '20211005_0044'
  }
},
computed: {
  imageSrc () {
    // 固定目录部分不能省略，否则webpack无法识别要编译的资源范围
    return require(`@/assets/gallery/images/${this.fileName}.jpg`)
  }
}

方法3：提前import图片资源 #

也可以在组件顶部先导入目标图片，再赋值给data变量：

import targetImg from '@/assets/gallery/images/20211005_0044.jpg'

export default {
  data () {
    return {
      imageSrc: targetImg
    }
  }
}

ref修改src的注意事项 #

用ref直接修改img的src时，同样不能赋值纯字符串路径，要传入require()或import处理后的资源路径：

this.$refs.imageElement.src = require('@/assets/gallery/images/new-img.jpg')

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