VUE打包图片加载失败问题

大家好，欢迎来到IT知识分享网。

昨天的搬运工，今天的小雷锋。

 问题描述，使用VUE-CLI打包后，出现图片无法显示情况。这里可能存在两种情况：

• 静态资源CSS中使用图片作为背景图片使用时。
• 在JS中生成图片标签后，再设置图片路径时。

 当你吃着火锅唱着歌，一路npm-run-dev都相安无事的时候，打包完事后，发现突然图片显示异常了！

如果你观察后，你会发现组件中使用的img标签都没任何问题，我们css中的背景图片以及在js中后加载的图片无法正常显示。

这时候就已经可以发现不是图片本身出现的问题了。

<img src="这种没有问题">

background: url(../../../static/img/这种可能会出现问题.png);

let imgAge = document.createElement("img");
imgAge.src = '../../static/img/这种也可能会出现问题.png'；
_this.appendChild(imgAge)

 解决

当我们看过报错信息后会发现，是因为图片的路径问题，在statich后面多加了两层文件，而他们是不存在的，这就导致了无法找到图片正确的路径。

更改build/utils.js文件中的 ExtractTextPlugin 的 options配置项.

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../', //注意: 此处根据路径, 自动更改
    fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
}

对于第二种情况，需要修改src的获取方式：用require请求即可。

let imgAge = document.createElement("img");
imgAge.src = require('../../static/img/icon_s@2x.png')
_this.appendChild(imgAge)