vue动态定义图片路径
当我在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中引入,
如下:
![](http://upload-images.jianshu.io/upload_images/9955987-b9a9c33695dfd2eb.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
WechatIMG4.jpeg
![](http://upload-images.jianshu.io/upload_images/9955987-cefa6573f76d56de.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
WechatIMG5.jpeg
我们可以看到不管是在html中引入或在css中引入图片都会被解析成base64编码,打包之后dist文件夹中也不会有图片,而是在压缩文件中有base64编码。
解释:因为加载一张图片就需要发送一次http请求,会降低页面性能,这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURI。相当于把图片数据翻译成一串字符,再把这些字符打包到文件当中,最终只需要引入这个文件就可以访问这个图片。当然如果图片较大,编码会消耗性能,因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy,一般会放在static文件夹下面。
![](http://upload-images.jianshu.io/upload_images/9955987-f1ef88f9d125f116.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
WechatIMG7.jpeg
![](http://upload-images.jianshu.io/upload_images/9955987-50a6a3dce83b903d.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
WechatIMG8.jpeg
上面代码中我们可以看到在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中引入,
如下:![](http://upload-images.jianshu.io/upload_images/9955987-b9145f4fe1248385.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
WechatIMG9.jpeg
![](http://upload-images.jianshu.io/upload_images/9955987-1d195fd503e819f3.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
WechatIMG10.jpeg
从上图我们可以发现如果在js中直接写,编译后图片是无法显示的,但是如果用require或import就可以正常展示,而且跟在html中或者css中直接引入效果是一样的。
![](http://upload-images.jianshu.io/upload_images/9955987-341f1a341770c853.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
WechatIMG11.jpeg
![](http://upload-images.jianshu.io/upload_images/9955987-ff51f351616a6efa.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
WechatIMG13.jpeg
![](http://upload-images.jianshu.io/upload_images/9955987-98c1c419e1d25e4e.jpeg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
WechatIMG12.jpeg
解释:使用不同的方式展示图片,webpack对他们的处理方式也是不同的:使用import或者require或者background都会被webpack的url-loader当做依赖模块处理,如果是直接写在js中,因为js是动态的所以webpack是不会处理的,打包后也不会显示在dist目录中。
第三种情况图片放在static文件夹下面,在html、css、js中直接引入,我们会发现图片都可以正常展示。
![](http://upload-images.jianshu.io/upload_images/9955987-15b8ccdfe805cc3e.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
1547536132355.jpg
总结:webpack只能处理静态资源。assets 和 static两个文件都是静态的,但是它们是有区别的,static文件夹下面的文件都是不能被webpack处理的,你必须使用绝对路径来引用这些文件,取决于在config.js里面加入的build.assetsPublicPath 和 build.assetsSubDirectory这两个属性设置的。其他地方的文件或图片都会被webpack解析成模块依赖,这时候就可以用url-loader和css-loader去处理。如果在js中引用图片,因为js是动态的所以没有办法去处理,但是我可以使用require或import将图片当成模块加载进来,就会被webpack当成静态文件解析,这时候就可以被url-loader处理。
2020.05.09补充一个遇到的坑:
最近做项目设置背景图片的时候发现了这个问题:
![](https://img2020.cnblogs.com/blog/1556521/202005/1556521-20200509174225626-2032530563.png)
或者
然后报错:
![](https://img2020.cnblogs.com/blog/1556521/202005/1556521-20200509174206222-839250418.png)
后来改为:
就没有报错了
为什么第三种情况不会报错呢?
vue2.5及以下版本以上三种写法都没有问题, 2.6就出现这个问题,应该和webpack配置相关 .
vue2.6用的是webapack4.0
为什么要这么写?
~和@又是什么意思呢?
webpack资源处理的规则,分为相对路径,没有前缀的路径;带~的路径,相对根目录的路径
1 相对路径: "./assets/start.png" 2 没有前缀的路径 "assets/start.png" 被webpack解析为 相对路径 3 带~的路径 "~@/assets/theme/start.png" 被webpack解析为 require(src/assets/theme/start.png) 动态引入 @在webpack 被resolve.alias配置下等价于/src 4 相对根目录的路径 "/assets/start.png" webpack不解析