base64编码的图片在网页中显示

<img @error="changeImgSrc(user)" :src="user.src" width="42" height="42">
项目中有人将图片转换为base64的编码进行img的src属性赋值,可以妥妥的显示。上面那串字符串是Data URI scheme:将一些小的数据直接嵌入网页中,而不用再从外部文件引入,上面那串字符串其实是一张小图片,可以通过复制粘贴到chrome的地址栏中,可以看到是个默认图像。
优点:
1,减少资源请求连接
2,当访问外部资源很麻烦或者受限时,可以很好的利用Data URI Scheme
缺点:
1,移动端性能比较低
2,base64编码后的数据体积是原数据体积的4/3,比以前二进制格式图片大了1/3.
3,Data URI形式图片不会被浏览器缓存,每次访问都被下载一次
什么场景适用Data URI Scheme?
1,访问外部资源受限
2,http请求不值得
3,图片在服务端用程序动态生成,每个访问用户显示不同,可以返回Data URI Scheme编码资源
【完】
自律,可以让我们活得更高级
自律的前期是兴奋的,中期是痛苦的,后期是享受的。
自律能够带给你发自内心的平静和享受。
base64编码的图片在网页中显示的更多相关文章
- BASE64编码的图片在网页中的显示问题的解决
BASE64位转码有两种: 一种是图片转为Base64编码,这种编码是直接可以在页面通过<img src='base64编码'/>的方式显示 Base64 在CSS中的使用 .demoIm ...
- 浅析用Base64编码的图片优化网页加载速度
想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片.如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度.所以现在有一种 ...
- 图片转成base64的字符串, 如何让图片在html中显示
图片在服务端已编码成base64的字符串放在xml里面,客户端接受xml,取得base64的字符串后,请问如何让图片在html中显示? <img src="data:image/png ...
- 在网页中显示CHM (c# csharp .net asp.net winform)
CHM即“已编译的帮助文件”,主要由.hhc(目录文件)..hhk(索引文件)以及相应的帮助主题文件(.html,.htm)这些内容编译而成. 方法对比 在网页中显示CHM内容,大致有以下几种办法: ...
- Emoji表情在网页中显示
最近遇到一个项目,客户手机上发送的表情要在电脑网页中显示,没有找到简便方法,于是有了以下方案. 由于Emoji表情传到后台是“口”,怎么找出接收数据中的表情是关键,各种搜索后,我用下面的正则表达式匹配 ...
- Android开发 - ImageView加载Base64编码的图片
在我们开发应用的过程中,并不是所有情况下都请求图片的URL或者加载本地图片,有时我们需要加载Base64编码的图片.这种情况出现在服务端需要动态生成的图片,比如: 二维码 图形验证码 ... 这些应用 ...
- 问题:C#将base64转换成二进制图片;结果:c# Base64编码和图片的互相转换代码
c# Base64编码和图片的互相转换代码 Base64编码在Web方面有很多应用,譬如在URL.电子邮件方面.网上有很多相关的资源用于提供Base64编码和其他编码的转换,.Net Framewor ...
- 网页中显示pdf
1.<embed width="800" height="600" src="test_pdf.pdf"> </embed ...
- 非常好的在网页中显示pdf的方法
今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_g ...
随机推荐
- python版本不同,修改cmd下的默认版本
原文出处 https://blog.csdn.net/zyx_ly/article/details/93137014 感谢博主分享 即修改系统环境变量的位置,把想设置成为默认的上移即可
- mysql命令运行sql文件
navicat转储sql,cmd 打开运行 切换到mysql目录下:mysql -uroot -p 回车输入密码 创建数据库语句: CREATE DATABASE `tcc` CHARACTER ...
- java成神之路
一.基础篇 1.1 JVM 1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 http://www.jcp.org/en/jsr/detail?id=133 http://i ...
- 吴裕雄--天生自然python学习笔记:python文档操作表格处理
表格也是 Word 文件中常用的对象,下面讲解 Win32com 中常用的表格操作命令 . 新建表格的语法为: 在 Word 文件中新建一个表格并插入单元格内容 在 Word 文件中新建一个 3 行 ...
- Java设计模-过滤器模式
过滤器模式 过滤器模式(Filter Pattern)或标准模式(Criteria Pattern)是一种设计模式,这种模式允许开发人员使用不同的标准来过滤一组对象,通过逻辑运算以解耦的方式把它们连接 ...
- 科技报告|AD报告|DTIC|PB报告|STAR|ERA|NTIS|DTIC|DOE|EPA|NASA |JPL|
信息检索-科技报告是灰色文献获取渠道有限. 技术论文中因保密需要,会删除关键性技术. AD报告也产生较早,1951年开始出版.现由美国国防技术情报中心(DTIC:Defence Technical I ...
- highcharys去掉x轴,y轴轴线和刻度
x轴 xAxis: { lineWidth :,//去掉x轴线 tickWidth:,//去掉刻度 labels: { enabled: false },//去掉刻度数字 }, y轴 yAxis: { ...
- C++中字符串的表示与转换
转换总结 1.char*转string:可以直接赋值. 2.char[]转string:可以直接赋值. 3.char*转char[]:不能直接赋值,可以循环char*字符串逐个字符赋值,也可以使用st ...
- fastdfs+nginx make时报错fatal error:fdfs_define.h: 没有那个文件或目录
环境: ubuntu 18.04.1 fastdfs-nginx-module_v1.16 root@wang-machine:~/桌面/FastDFS# cd nginx-1.8.1/root@wa ...
- 两种方法使用js读写cookie实现一个底部广告浮层效果
下面一个案例实现了js实现一个页面浮层并且使用两种方法使用js读写cookie:来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方 ...