(vue.js)vue+webpack动态设置图片src导致404错误(1/2)

关于网友提出的“ (vue.js)vue+webpack动态设置图片src导致404错误
”问题疑问，本网通过在网上对“ (vue.js)vue+webpack动态设置图片src导致404错误
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：

问题： (vue.js)vue+webpack动态设置图片src导致404错误
描述:

初学vue+webpack，主要想实现一个拼图的效果。

//script部分
export default {
  data () {
    return {
      puzzles: []
    }
  },
  methods: {
      render(){
          let puzzleArr = [],
              i = 1

        for (i; i <= 9; i++) {
            puzzleArr.push("../assets/logo"+i+".png");
        }

        // 随机打乱数组
        puzzleArr = puzzleArr.sort(() => {
            return Math.random() - 0.5;
        });

        this.puzzles = puzzleArr;
      }
      

webpack配置如下

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  }
  

一直报404的错误，应该是webpack没有找到图片。如果代码改为以下这种格式就没有问题，但是我需要随机排序，不能写死顺序，这种问题应该如何解决呢？

export default {
  data () {
    return {
      puzzles: [{src: require('../assets/logo1.jpg')}...]
    }
  }

---

解决方案1:

v-bind:src是作用于运行时的,简单来说就是绑定了一个属性,属性在程序运行过程中发生了变化,才会导致绑定src发生变化,你上面的第一种写法,最终生成的html就是

会404是正常的,因为webpack根本没有打包相应的图片
webpack完成的任务,实际上应该算编译时
就算不用

return {
  puzzles: [{src: require('../assets/logo1.jpg')}...]
}

你把模板文件改成

你会发现最终打包处理的模板会是

或是以base64编码的格式插入src中