当我在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. 如何成为一名高级C++程序员

     C++这门语言从诞生到今天已经经历了将近30个年头.不可否认,它的学习难度都比其它语言较高.而它的学习难度,主要来自于它的复杂性.现在C++的使用范围比以前已经少了很多,java.C#.python ...

  2. github浏览器无法访问,并且idea无法push项目

    github浏览器无法访问,并且idea无法push项目 原因:前一晚还能正常访问github,今天就无法提交项目了.前一步的操作为删库,然后改库.估计是因为dns出现了问题,具体问题不知道. 网上一 ...

  3. go语言指南之切片练习

    题目: 实现 Pic.它应当返回一个长度为 dy 的切片,其中每个元素是一个长度为 dx,元素类型为 uint8 的切片.当你运行此程序时,它会将每个整数解释为灰度值(好吧,其实是蓝度值)并显示它所对 ...

  4. MVC08

    1. c# 索引器(indexer) using System; using System.IO; namespace IO { class Program { ]; static void Main ...

  5. 使用tf serving-gpu时,没有安装NVIDIA时报的错?

    当部署tf serving-gpu时,出现上述的错误,有两种情况: 1.服务器中已经安装NVIDIA驱动了,只是版本比较低了,需要升级一下比较新的nvidia驱动: 2.就是服务器中没有安装NVIDI ...

  6. VMware虚拟机从安装到激活再到创建虚拟机解决黑屏、卡、死机系列问题教程第二篇

    第二篇:在VMware中创建一个虚拟机(黑屏死机卡在最下面简单说一下你就懂了) 1.我们要打开我们已经安装好的VMware,然后点击创建新的虚拟机 2.然后选择自定义 3.下面这个默认,直接下一步 4 ...

  7. 通过filebeat、logstash、rsyslog采集nginx日志的几种方式

    由于nginx功能强大,性能突出,越来越多的web应用采用nginx作为http和反向代理的web服务器.而nginx的访问日志不管是做用户行为分析还是安全分析都是非常重要的数据源之一.如何有效便捷的 ...

  8. Javascript中String()和new String()的区别——JS的包装对象

    最近在看Symbol不能使用new操作符,然后类比到Number,String,Boolean,因为它们同属于基本类型,但是有有所差异:Number,String,Boolean是可以使用new操作符 ...

  9. Matplotlib数据可视化(6):饼图与箱线图

    In [1]: from matplotlib import pyplot as plt import numpy as np import matplotlib as mpl mpl.rcParam ...

  10. kafka实现无消息丢失与精确一次语义(exactly once)处理

    在很多的流处理框架的介绍中,都会说kafka是一个可靠的数据源,并且推荐使用Kafka当作数据源来进行使用.这是因为与其他消息引擎系统相比,kafka提供了可靠的数据保存及备份机制.并且通过消费者位移 ...