vue动态定义图片路径

大憨熊 提交于 2019-12-02 15:31:51

 当我在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中引入,如下:

 
WechatIMG4.jpeg

 

 
WechatIMG5.jpeg

我们可以看到不管是在html中引入或在css中引入图片都会被解析成base64编码,打包之后dist文件夹中也不会有图片,而是在压缩文件中有base64编码。
  解释:因为加载一张图片就需要发送一次http请求,会降低页面性能,这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURI。相当于把图片数据翻译成一串字符,再把这些字符打包到文件当中,最终只需要引入这个文件就可以访问这个图片。当然如果图片较大,编码会消耗性能,因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy,一般会放在static文件夹下面。


 
WechatIMG7.jpeg

 

 
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中引入,如下:
 
WechatIMG9.jpeg

 

 
WechatIMG10.jpeg

从上图我们可以发现如果在js中直接写,编译后图片是无法显示的,但是如果用require或import就可以正常展示,而且跟在html中或者css中直接引入效果是一样的。


 
WechatIMG11.jpeg

 
WechatIMG13.jpeg

 

 
WechatIMG12.jpeg

  解释:使用不同的方式展示图片,webpack对他们的处理方式也是不同的:使用import或者require或者background都会被webpack的url-loader当做依赖模块处理,如果是直接写在js中,因为js是动态的所以webpack是不会处理的,打包后也不会显示在dist目录中。
  第三种情况图片放在static文件夹下面,在html、css、js中直接引入,我们会发现图片都可以正常展示。
 
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处理。
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!