当我在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补充一个遇到的坑:
最近做项目设置背景图片的时候发现了这个问题:

或者

然后报错:

后来改为:

就没有报错了

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

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不解析

vue动态定义图片路径的更多相关文章

  1. Vue 动态设置图片路径

      大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的   本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...

  2. vue中background-image图片路径问题

    按照以往在css文件中写background:url('图片路径'),完成后加载竟然显示出错,起初以为路径不对,检查了几遍,仍然没有问题.最后百度找答案,发现不少同行都遇到过这种问题,遂记录下自己所采 ...

  3. vue动态渲染图片,引用路径需要注意的地方

    1.把图片放在和src同级的static里面,这用按照正常的方式进行引入,例如: 2.图片可以在其他文件夹,但是在script引入是必须加上require <img :src="ite ...

  4. siverlight 后台动态设置图片路径的总结

    最近碰到了个问题,需要给一个用户控件中的image动态设置图片资源 1.图片资源属性为resource时,静态引用无任何问题,但是动态设置时,就什么也不显示 后来找到问题所在, 必须把此图片属性项中“ ...

  5. jquery动态设置图片路径和超链接href属性

    js document.getElementById("myImage").src="hackanm.gif"; jquery $("#img&quo ...

  6. vue 本地静态图片路径写法

    在img标签中 <img src="../../assets/images/haibao/06-2@2x.png" class="" width=&quo ...

  7. Vue src动态引入图片不显示问题

    使用vue动态引入图片显示失败,查看控制台,发现图片返回类型为text/html,这里我的图片是从后台服务器上获取的,如果你没有使用Vue的devServer.proxy 进行代理,可以光速移步百度 ...

  8. vue项目sql图片动态路径引用问题

    最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环 ...

  9. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

随机推荐

  1. tfgan折腾笔记(一):核心功能简要概述

    tfgan是什么? tfgan是tensorflow团队开发出的一个专门用于训练各种GAN的轻量级库,它是基于tensorflow开发的,所以兼容于tensorflow.在tensorflow1.x版 ...

  2. nginx设置目录浏览及中文乱码问题解决

    在Nginx下默认是不允许列出整个目录的.如需此功能, 先打开nginx.conf文件,在location server 或 http段中加入 autoindex on;另外两个参数最好也加上去: a ...

  3. 集成google翻译的小tips

    文章首发于github.io 2018-08-04 12:43:20 google翻译的强大,就像我们公司的slogan : "让语言无国界,让世人心相通" 友情提示: googl ...

  4. 纯CSS实现带返回顶部右侧悬浮菜单

    这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...

  5. Matplotlib数据可视化(5):柱状图与直方图

      柱状图和直方图是两种非常类似的统计图,区别在于: 直方图展示数据的分布,柱状图比较数据的大小. 直方图X轴为定量数据,柱状图X轴为分类数据.因此,直方图上的每个条形都是不可移动的,X轴上的区间是连 ...

  6. agent判断用户请求设备

  7. ASP.NET Core 快速入门(Razor Pages + Entity Framework Core)

    引子 自从 2009 年开始在博客园写文章,这是目前我写的最长的一篇文章了. 前前后后,我总共花了 5 天的时间,每天超过 3 小时不间断写作和代码调试.总共有 8 篇文章,每篇 5~6 个小结,总截 ...

  8. CVPR 2020 三篇有趣的论文解读

    作者 | 文永亮 学校 | 哈尔滨工业大学(深圳) 研究方向 | 视频预测.时空序列预测 目录 AdderNet - 其实不需要这么多乘法 Deep Snake for Real-Time Insta ...

  9. Simulink仿真入门到精通(十三) Simulink创建自定义库

    当用户自定义了一系列模块之后,可以自定义模块库将同类自定义模块显示到Simulink Browser中,作为库模块方便地拖曳到新建模型中. 建立这样的自定义库需要3个条件: 建立library的mdl ...

  10. 吃透这份pdf,面试阿里、腾讯、百度等一线大厂,顺利拿下心仪offer!

    前言 最近一位年前裸辞的朋友来找我诉苦,说因为疫情原因现在都在家吃老本.本想着年后就来找工作的,但是现在这个情况也不好找,而且很多公司也随着这次疫情面临着资金紧缺导致裁员严重的甚至倒闭,导致很多人失业 ...