解锁在vue中引入图片的正确姿势

大家都知道，在H5中调用本地静态资源引入图片，是通过 img 标签的 src 属性：

<img src="/urltoimg">

使用vue项目开发中，很多人会遇到打包后webpack找不到图片路径的问题，下面是引入图片的正确方法：

1、在js中引入图片，在template中自动绑定

由于图片一般是动态绑定的，引入图片一般使用require()，图片是作为模块引入项目中。这样webpack会根据自己的规则解析图片，打包后，会替换为解析后的图片地址。如果直接写路径，打包后webpack是找不到图片的。

// template中动态绑定
<img :src="imgSrc">
// javascript
data () {
  return {
    imgSrc:require('../assets/img/...')
  }
}

2、如果在template中引入绝对路径，不需要require()。

// template 没有使用动态绑定
<img src="../assets/img/...'>

3、在style中引入图片，使用url()。

// style 
.index-board-car .index-board-item-inner{
  background: url(../assets/images/1.png) no-repeat;
}
.index-board-loud .index-board-item-inner{
  background: url(../assets/images/2.png) no-repeat;
}
.index-board-earth .index-board-item-inner{
  background: url(../assets/images/3.png) no-repeat;
}
.index-board-hill .index-board-item-inner{
  background: url(../assets/images/4.png) no-repeat;

后记

一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。
然鹅，部署到带有文件夹的项目中，这种绝对路径就会出现问题。因为webpack把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。

解决办法

打开webpack.prod.conf.js
找到output：增加 publicPath: './', 即可。

  output: {
    publicPath: './',
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

那么这样后，资源的引用路径就正确了。

当然在config文件夹下的index.js中修改 assetsPublicPath: './'同样也可以达到资源的相对引用。
上面虽然解决了资源路径的引用问题，但是资源里面的背景图片，不像index.html中加载资源一样，通过./static/js/app.js引用可以正常加载；图片资源是通过css加载的，如 background: url("../../assets/images/logo.png") no-repeat；被打包后变成了url(static/img/logo.2f00bf2.png) no-repeat；所以我们要保留css引用图片的正常路径，即：

url(../../static/img/logo.2f00bf2.png) no-repeat

需要修改build文件夹下的utils.js代码，如下所示：
添加PublicPath: '../../'；

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        PublicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

添加一行代码，这样不论是字体还是图片的引用问题都能解决。