vue+webpack动态设置图片src导致404错误

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

<template>
    <ul>
        <li 
            v-for="item in puzzles">
            <img v-bind:src="item"/>
        </li>
    </ul>
</template>

//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')}...]
    }
  }
阅读 14.6k
5 个回答

js动态生成的路径无法被url-loader解析到,如果你去build,会发现图片甚至不会打包输出到dist目录(webpack是按需打包的)。

如果你是vue-cli初始化的项目,解决的办法:
第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/static的),比如图片放在static/a.png
第二步,js中使用/static/a.png去引用就行了。

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

<img src="../assets/logo1.png"/>
<img src="../assets/logo2.png"/>
<img src="../assets/logo3.png"/>

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

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

你把模板文件改成

<img src="../assets/logo1.jpg"/>
<img src="../assets/logo2.jpg"/>
<img src="../assets/logo3.jpg"/>

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

<img src="/path/to/your/image/logo1.hash.jpg"/>
<img src="/path/to/your/image/logo2.hash.jpg"/>
<img src="/path/to/your/image/logo.hash.jpg"/>

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

<img src="data:image/jpg;base64......."/>
<img src="data:image/jpg;base64......."/>
<img src="data:image/jpg;base64......."/>

如果需要随机排序,感觉还是用require的方式,然后对puzzles数组洗乱一下就好了

//template
<img v-for="item in list" :src="item.src" width="90">

//script
data () {
    return {
        list: []
    }
},
methods: {
    request () {
        this.list = ['接口获取list']
        this.list.map(item => {
            item.src = require(`@/assets/img/${variable}.png`)
        })
    }
}

render()方法没有执行,puzzles数组没有数据,把打乱顺序那块写在computed里试下,或者在ready里执行render()

新手上路,请多包涵

上面说的原理基本没问题,今天在实际开发中找到了另外一个解决方法,即可以在dev和build时统一,也不会在 npm run dev时被删除。


1.先用一个div把图片加载并隐藏,这样可以让webpack解析到图片并使用loader进行解析。
2.将图片后缀改名,改成原本url-loader的正则(/\.(png|jpe?g|gif|svg)(\?.*)?$/)无法匹配到,我这里改成了.spng(1中的路径也是.png)。
3.在webpack.base.conf.js中新增一个loader

{
    test: /\.(spng)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 1,
      name: utils.assetsPath('img/[name].png')
    }
},

4.这时在v-for中直接读取.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏