javascript - 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')}...]
    }
  }

解决方案

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

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

这篇关于javascript - vue+webpack动态设置图片src导致404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！