当我在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. ip修改成域名

    将ip修改成域名,这样的话可以使程序变得更加健壮,别人不能直接看见你的ip地址. 后来总结下分享给大家.首先找到hosts文件的位置,这个文件是系统dns默认查找的文件. windows 系统:C:\ ...

  2. 54-with管理文件操作上下文

    目录 with管理文件操作上下文 with管理文件操作上下文 之前我们使用open()方法操作文件,但是open打开文件后我们还需要手动释放文件对操作系统的占用.其实我们可以更方便的打开文件,即Pyt ...

  3. 系统级编程(csapp)

    系统级编程漫游 系统级编程提供学生从用户级.程序员的视角认识处理器.网络和操作系统,通过对汇编器和汇编代码.程序性能评测和优化.内存组织层次.网络协议和操作以及并行编程的学习,理解底层计算机系统对应用 ...

  4. Java和C++引用的区别

    Java的引用实际上是对指针的一个封装. C++的引用是变量的一个别名. Java的定义出来的变量(除了基本类型)其实就是一个引用,指向真正的对象. C++可以通过将引用传入函数,在函数内修改所引用的 ...

  5. 项目页面集成ckeditor富文本编辑器

    步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...

  6. CSS 实现元素较宽不能被完全展示时将其隐藏

    首发于本人的博客 varnull.cn 遇到一个需求,需要实现的样式是固定宽度的容器里一排显示若干个标签,数量不定,每个标签的长度也不定.当到了某个标签不能被完全展示下时则不显示.大致效果如下,标签只 ...

  7. Android Base64图片无法长按保存 问题解决

    踩了一个巨坑. 目前微信ios/android 均能长按保存src=base64的图片  (微信android x5 专门解决了这个问题); 但是android其他App没有针对解决这个系统问题(姑且 ...

  8. LeetCode 154.Find Minimum in Rotated Sorted Array II(H)(P)

    题目: Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. ( ...

  9. css3 scale 缩放出现 1px 问题

    问题描述 先来一段html代码 <div class="container"> <div class="parent"> <div ...

  10. JAVAEE学习day01

    1.二进制和十进制之间的转换: 十进制转换成二进制: 除2取余,从下往上吧余数拼接 二进制转换十进制: 1 0 1 0 8 4 2 1 把有1位的十进制求和 2.JAVA语言跨平台的原理 java程序 ...