大家都知道，在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)
}
添加一行代码，这样不论是字体还是图片的引用问题都能解决。
