当我在html模块或者css中引入图片的时候用相对路径,例:
<div> <img src="../../assets/img/policeImg/tt.png"> </div>
这时候图片可以正常显示,但是我想把图片路径动态化,所以我会把图片路径绑定在data中。
<div> <img :src="img"> </div> <script> export default { data () { return { img: '../../assets/img/policeImg/tt.png' } } } </script>
我们会发现图片显示不出来。
几种情况
第一种情况图片放在assets文件夹下面,在html模版中直接引入或者在css中引入,
如下:
我们可以看到不管是在html中引入或在css中引入图片都会被解析成base64编码,打包之后dist文件夹中也不会有图片,而是在压缩文件中有base64编码。
解释:因为加载一张图片就需要发送一次http请求,会降低页面性能,这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURI。相当于把图片数据翻译成一串字符,再把这些字符打包到文件当中,最终只需要引入这个文件就可以访问这个图片。当然如果图片较大,编码会消耗性能,因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy,一般会放在static文件夹下面。
上面代码中我们可以看到在css中引入assets文件夹中的图片,但是编译或打包之后都显示这张图片在static文件夹下面,说明这张图片大小超过了limit范围,所以直接被拷贝到static文件夹下。那么url-loader和file-loader有什么关系呢?
简单的说,url-loader封装了file-loader,只需要安装url-loader即可,不需要安装file-loader。url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader,file-loader将图片拷贝到static文件夹下。
第二种情况图片放在assets文件夹下面,在js中引入,
如下:
从上图我们可以发现如果在js中直接写,编译后图片是无法显示的,但是如果用require或import就可以正常展示,而且跟在html中或者css中直接引入效果是一样的。
解释:使用不同的方式展示图片,webpack对他们的处理方式也是不同的:使用import或者require或者background都会被webpack的url-loader当做依赖模块处理,如果是直接写在js中,因为js是动态的所以webpack是不会处理的,打包后也不会显示在dist目录中。
第三种情况图片放在static文件夹下面,在html、css、js中直接引入,我们会发现图片都可以正常展示。
总结:webpack只能处理静态资源。assets 和 static两个文件都是静态的,但是它们是有区别的,static文件夹下面的文件都是不能被webpack处理的,你必须使用绝对路径来引用这些文件,取决于在config.js里面加入的build.assetsPublicPath 和 build.assetsSubDirectory这两个属性设置的。其他地方的文件或图片都会被webpack解析成模块依赖,这时候就可以用url-loader和css-loader去处理。如果在js中引用图片,因为js是动态的所以没有办法去处理,但是我可以使用require或import将图片当成模块加载进来,就会被webpack当成静态文件解析,这时候就可以被url-loader处理。