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

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

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

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

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

// template中动态绑定

// javascript
data () {
  return {
    imgSrc:require('../assets/img/...')
  }
}

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

// template 没有使用动态绑定
 
 
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)
    }
 
 
添加一行代码，这样不论是字体还是图片的引用问题都能解决。