<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编码的图片在网页中显示的更多相关文章

  1. BASE64编码的图片在网页中的显示问题的解决

    BASE64位转码有两种: 一种是图片转为Base64编码,这种编码是直接可以在页面通过<img src='base64编码'/>的方式显示 Base64 在CSS中的使用 .demoIm ...

  2. 浅析用Base64编码的图片优化网页加载速度

    想必大家都知道网页加载的过程,从开始请求,到加载页面,开始解析和显示网页,遇到图片就再次向服务器发送请求,加载图片.如果图片很多的话,就会产生大量的http请求,从而影响页面的加载速度.所以现在有一种 ...

  3. 图片转成base64的字符串, 如何让图片在html中显示

    图片在服务端已编码成base64的字符串放在xml里面,客户端接受xml,取得base64的字符串后,请问如何让图片在html中显示? <img src="data:image/png ...

  4. 在网页中显示CHM (c# csharp .net asp.net winform)

    CHM即“已编译的帮助文件”,主要由.hhc(目录文件)..hhk(索引文件)以及相应的帮助主题文件(.html,.htm)这些内容编译而成. 方法对比 在网页中显示CHM内容,大致有以下几种办法: ...

  5. Emoji表情在网页中显示

    最近遇到一个项目,客户手机上发送的表情要在电脑网页中显示,没有找到简便方法,于是有了以下方案. 由于Emoji表情传到后台是“口”,怎么找出接收数据中的表情是关键,各种搜索后,我用下面的正则表达式匹配 ...

  6. Android开发 - ImageView加载Base64编码的图片

    在我们开发应用的过程中,并不是所有情况下都请求图片的URL或者加载本地图片,有时我们需要加载Base64编码的图片.这种情况出现在服务端需要动态生成的图片,比如: 二维码 图形验证码 ... 这些应用 ...

  7. 问题:C#将base64转换成二进制图片;结果:c# Base64编码和图片的互相转换代码

    c# Base64编码和图片的互相转换代码 Base64编码在Web方面有很多应用,譬如在URL.电子邮件方面.网上有很多相关的资源用于提供Base64编码和其他编码的转换,.Net Framewor ...

  8. 网页中显示pdf

    1.<embed width="800" height="600" src="test_pdf.pdf"> </embed ...

  9. 非常好的在网页中显示pdf的方法

    今天有一需求,要在网页中显示pdf,于是立马开始搜索解决方案,无意中发现一个非常好的解决方法,详见http://blogs.adobe.com/pdfdevjunkie/web_designers_g ...

随机推荐

  1. 《C 程序设计语言》练习1-3

    #include<stdio.h> /*当fahr=0,20,...,300时,打印华氏温度与摄氏温度对照表; 浮点数版本*/ main () { float fahr,celsius; ...

  2. Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

    解决办法: 两个方案:1.注册处理函数时,用如下方式,明确声明为不是被动的window.addEventListener('touchmove', func, { passive: false }) ...

  3. Swiper中文网

    http://3.swiper.com.cn/api/Slides_grid/2014/1215/24.html slidesPerView :2,   即设置slider容器能够同时显示的slide ...

  4. python语法基础-基础-控制语句

    ###############    if条件控制语句    ############### # 以下实例 x 为 0-99 取一个数,y 为 0-199 取一个数,如果 x>y 则输出 x,如 ...

  5. 专利|Pct||

    专利:有些专利写的尽量模糊,为了不让别人检出,让别人能轻易侵犯专利权 优先权:在本国申请后,在他国也是同一个专利人申请,并也是同一个申请日. 发明20年:实用新型外观设计:20年 Pct:专利合作条约 ...

  6. [LC] 215. Kth Largest Element in an Array

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...

  7. Nginx笔记:支持对用户提交URL和服务的URL不一致时,保持对POST提交的支持

    用户访问的URL和服务的URL不一致,需要对URL修改,同时使用的是POST提交方式 location ~* ^/portalproxy/([-]*)/portal$ { #rewrite '^/po ...

  8. SpringMVC中Interceptor和Filter区别

    Interceptor 主要作用:拦截用户请求,进行处理,比如判断用户登录情况,权限验证,主要针对Action请求进行处理.是通过HandlerInterceptor 实现的. 配置如下: <m ...

  9. Ionic 4 beta + Capacitor beta 尝鲜

    本文为原创文章,转载请标明出处 开发环境: Ionic 4 beta 3.Capacitor beta 6. 首先 ionic start 工程名 blank --type=angular,问是否集成 ...

  10. DailyRollingFileAppender-设置文件大小和备份天数

    感谢:http://byx5185.iteye.com/blog/1616034 1.重写FileAppender : package com.bankht.cis.tps.apps.tps.util ...