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中引入，如下：

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处理。

2020.05.09补充一个遇到的坑：

最近做项目设置背景图片的时候发现了这个问题：

或者

vue动态定义图片路径

然后报错：

后来改为：

vue动态定义图片路径

就没有报错了

为什么第三种情况不会报错呢？

vue2.5及以下版本以上三种写法都没有问题, 2.6就出现这个问题,应该和webpack配置相关 .
vue2.6用的是webapack4.0

为什么要这么写?

~和@又是什么意思呢?

webpack资源处理的规则,分为相对路径,没有前缀的路径；带~的路径,相对根目录的路径

 相对路径: "./assets/start.png" 

 没有前缀的路径 "assets/start.png" 被webpack解析为 相对路径

 带~的路径  "~@/assets/theme/start.png" 被webpack解析为 require(src/assets/theme/start.png) 动态引入

 @在webpack 被resolve.alias配置下等价于/src

4 相对根目录的路径 "/assets/start.png" webpack不解析

参考：https://blog.****.net/qq_34767115/article/details/95962738

秒客网

vue动态定义图片路径

几种情况

相关文章