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 ...
随机推荐
- 5-7 学生cpp成绩统计
完成“学生cpp成绩计算”之后,修改Person和Student类,各自增加两个无参构造函数. 仍以Person类为基础,建立一个派生类Teacher,增加以下成员数据: int ID;//教师工号 ...
- 1.redis安装配置
Redis 1.Redis安装: 说明: 1.也是一种类似于Memcached的kev-value机制的存储服务 2.是非关系型数据库(NoSQL)的一种. 3.官网:www.redis.io,中文网 ...
- LTE-U/LAA
将LTE扩展至非授权频谱,得益于一个稳健的无线电通信线路,具有更好协调性的同步节点,以及以授权频谱为基点的载波聚合,LTE-U/LAA能提供比载波Wi-Fi更佳的网络性能和更强的用户体验,为移动运营商 ...
- MyEclipse10安装properties文件插件
安装步骤 1.下载PropertiesEditor插件 http://propedit.sourceforge.jp/index_en.html 2.解压出features.plugins文件 3.在 ...
- spring web项目中整合netty, akka
spring web项目中整合netty, akka 本身的web项目仍然使用tomcat/jetty8080端口, 在org.springframework.beans.factory.Initia ...
- LabVIEW的优点
知道Labview的英文全称是什么吗?Labview的创始公司的名字是什么吗?哈哈,其实这就是NI(National Instruments)美国国家仪器公司创造Labview的初衷:代替传统测量仪器 ...
- python后端面试第八部分:制作简历和如何面试--长期维护
############### 就业指导 ################ 这里面有套路,你懂了这个套路,你会找到更好的工作,你会更快的找到工作, ,如何制作简历,五颗星 ,如何投递简历 ...
- python后端面试第五部分:Linux操作系统--长期维护
################## Linux操作系统 ####################### 1,讲一下你常用的Linux/git命令和作用: 2,查看当前进程是用什么命 ...
- FPGA设计思想之串并转换
数据流中,用面积换速度-串行转并行的操作 并行转串行数据输出:采用计数方法,将并行的数据的总数先表示出来,然后发送一位数据减一,后面的接收的这样表示: data_out <= data[cnt] ...
- 推送至远程仓库使用git push -u的原因
第一次把本地仓库推送至远端时,为了以后方便一定要使用 git push -u origin master [此处是把本地的master分支推送至远程的master分支]