第五十二篇:webpack的loader(三) -url-loader (图片的loader)
好家伙,
1.什么是base64?
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。
这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个 http 请求下载而来的
没错,不管如何,图片的下载始终都要向服务器发出请求,要是图片的下载不用向服务器发出请求,
而可以随着 HTML 的下载同时下载到本地那就太好了,而 base64 正好能解决这个问题。
使用base64编码可以节省一个 http 请求。图片的 base64 编码可以算是前端优化的一环
将图片进行转码
将解好的码
再放到"src"中
可以看到效果是一样的
(小的图片,如logo可以用,较大较复杂的图片不建议使用)
2.安装并配置处理图片的loader
打包处理样式表中与url 路径相关的文件
2.1安装
运行
npm i url-loader@4.1.1file-loader@6.2.0-D
2.2.在webpack.config.js的 module ->rules 数组中,添加 loader 规则如下:
module:{ //所有第三方文件模块的匹配规则 rules:[ // 文件后缀名的匹配规则 { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229' },
//参数,,参数值
] }
其中,之后的是loader的参数项:
1.limit用来指定图片的大小,单位是字节(byte)
(只有在小于这个值的时候才会将该图片转为base64)
2.只有≤limit 大小的图片,才会被转为 base64格式的图片
2.3.在.js文件中导入图片
( 在webpack中,一切皆模块,都可以通过ES6导入语法进行导入和使用 )
//1.导入图片得到图片文件
import logo from './images/logo.jpg' //2.给img标签的src动态赋值 $('.box').attr('src',logo)
搞定!
第五十二篇:webpack的loader(三) -url-loader (图片的loader)的更多相关文章
- 第五十二篇、 OC获取视频的第一帧图片thumbnailImage
获取视频的第一帧图片 有时候我们拍摄完视频后,希望获取一张图片当作这个视频的介绍,这个图片thumbnailImage可以从视频的第一帧获取到. 我们的思路是先获取视频的URL,然后初始化一个MPMo ...
- 第五十二篇 Linux相关——数据库服务MySQL
No.1. MySQL基本操作 CentOS7默认安装mariadb数据库,先将其移除 移除命令:sudo yum -y remove mariadb-libs.x86_64 下载MySQL源 ...
- C++第五十二篇 -- 多线程之消息传递
主线程向子线程发送消息 参考链接:https://www.cnblogs.com/ranjiewen/p/5729539.html 1. 创建线程语句 HANDLE hThread; DWORD dw ...
- 第八十二篇:Vue购物车(三) 实现全选功能
好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...
- 《手把手教你》系列技巧篇(五十二)-java+ selenium自动化测试-处理面包屑(详细教程)
1.简介 面包屑(Breadcrumb),又称面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了 ...
- Spring Cloud第十二篇 | 消息总线Bus
本文是Spring Cloud专栏的第十二篇文章,了解前十一篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring ...
- 解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持(译)
解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持(译) http://improve.dk/orcamdf-row-compression-support/ 在这两个月的断断续续的开发 ...
- 第十二篇 SQL Server代理多服务器管理
本篇文章是SQL Server代理系列的第十二篇,详细内容请参考原文 在这一系列的上一篇,我们查看了维护计划,一个维护计划可能会创建多个作业,多个计划.你还简单地看了SSIS子系统,并查看了维护计划作 ...
- 第十二篇 Integration Services:高级日志记录
本篇文章是Integration Services系列的第十二篇,详细内容请参考原文. 简介在前一篇文章我们配置了SSIS内置日志记录,演示了简单和高级日志配置,保存并查看日志配置,生成自定义日志消息 ...
随机推荐
- JavaScript有哪些数据类型,它们的区别?
基本数据类型:number.string.boolean.Undefined.NaN(特殊值).BigInt.Symbol 引入数据类型:Object NaN是JS中的特殊值,表示非数字,NaN不是数 ...
- SAP APO-供应网络计划
供应网络计划整合了供应链中的所有流程-采购,制造和分销. 供应网络计划可以优化采购和生产,缩短订单完成时间,并改善客户服务. 供应网络计划与高级计划和优化的其他过程紧密集成,以开发用于购买,制造和分配 ...
- Linux安装Anaconda3完整教程
Linux安装Anaconda3完整教程 欢迎关注H寻梦人公众号 相关链接 官方安装Anaconda3教程 [手把手教你]如何在Linux系统搭建jupyter notebook CentOS8.2安 ...
- zabbix监控mysql主从同步
获取主从复制sql线程和I/O线程状态是否为yes #!/bin/bash HOSTNAME="数据库IP" PORT="端口" USERNAME=" ...
- python写个前端,这不是轻轻松松~
前端除了用js++css+html,还有没有其它办法?其实python也可以 1. 安装与基本流程 Python学习交流Q群:660193417### 安装 PyWebIO 和其他的第三方库一样使用p ...
- 体验SRCNN和FSRCNN两种图像超分网络应用
摘要:图像超分即超分辨率,将图像从模糊的状态变清晰. 本文分享自华为云社区<图像超分实验:SRCNN/FSRCNN>,作者:zstar. 图像超分即超分辨率,将图像从模糊的状态变清晰.本文 ...
- 密码学系列之:使用openssl检测网站是否支持ocsp
目录 简介 支持OCSP stapling的网站 获取服务器的证书 获取OCSP responder地址 发送OCSP请求 一个更加简单的方法 总结 简介 OCSP在线证书状态协议是为了替换CRL而提 ...
- Markdown 的基本使用
Markdown基本语法 1.标题 //标题的写法 #一级标题 ##二级标题 ###三级标题 //以此类推... 效果: 一级标题 二级标题 三级标题 2.分割线 使用三个或以上-或*表示,并且改行不 ...
- 如何用空气质量查询API接口进行快速开发
空气质量的好坏反映了空气污染程度,它是依据空气中污染物浓度的高低来判断的.空气污染是一个复杂的现象,在特定时间和地点空气污染物浓度受到许多因素影响.来自固定和流动污染物的人为污染物排放大小是影响空 ...
- 使用uart串口接收模块接收信号,控制led灯闪烁
功能描述: 使用遵循uart协议的接收模块接收控制信号,用来控制led的闪烁. 设计输入: 1.uart输入信号 2.时钟信号 3.复位信号 4.led信号 设计思路: 总体上:前面已经写了串口接收模 ...