举个图片的例子：
网页中一张图片可以这样显示：

<img src="http://mail.163.com/images/x.png" />

也可以这样显示：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZm

OUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb

2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC" />

把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像。

 
逗号后面就是这个image/png文件base64编码后的数据
 
目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

BS中的 data:image/png;base64的更多相关文章

  1. Css中路径data:image/png;base64的用法详解

    今天查看一些网站的css中发现了 background-image:url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAAB ...

  2. Css中路径data:image/png;base64的用法详解 (转载)

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: background-image:url(data:image/png;base64, iVBORw0KGg ...

  3. 什么是data:image/png;base64,？一道关于Data URI Scheme的入门级CTF_Web题

    一道关于Data URI Scheme的入门级CTF_Web题 0x00 题目描述 这是偶尔遇到的某网安交流群的入群题,题目没有任何的提示,直接给了一个txt文件. 0x01 解题过程 通过给的这个文 ...

  4. background-image:url(data:image/gif;base64,XXXX) base64方式将本地图片添加到文档中

    background-image:url(data:image/gif;base64,R0lGODlhCwAMAMZjAElxvlNvtVRxtkp1v0p9wVh7vkqBwl58vml6vml7v ...

  5. data:image/png;base64

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  6. 通过data:image/png;base64把图片直接写在src里

    从网上下了个源文件查看时候发现了引用图片的地址不是在本地上的,而是后面跟了一大串字符data:image/png;base64...查了一下资料分析如下: 关于用base64存储图片 网页上有些图片的 ...

  7. url(data:image/png;base64,R0**)(转)

    url(data:image/png;base64,R0**) 所谓"data"类型的Url格式,是在RFC2397中 提出的,目的对于一些"小"的数据,可以在 ...

  8. data:image/png;base64是什么

    大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJ ...

  9. html image -- data:image/png;base64

    1,  data:image/png;base64 <!DOCTYPE HTML> <html> <head> <meta http-equiv=" ...

随机推荐

  1. Mongodb profile（慢查询日志）

    在MySQL中,慢查询日志是经常作为我们优化数据库的依据,那在MongoDB中是否有类似的功能呢?答案是肯定的,那就是MongoDB Database Profiler.所以MongoDB 不仅有,而 ...

  2. python练手基础

    Python相关文档0.1. Python标准文档0.2. Python实用大全0.3. 迷人的Python0.4. 深入理解Python0.5. Python扩展库网址 http://pypi.py ...

  3. Asp.Net Core--自定义基于策略的授权

    翻译如下: 在封面下,角色授权和声明授权使用需求,需求的处理程序和预配置的策略. 这些构建块允许您在代码中表示授权评估,从而允许更丰富,可重用和容易测试的授权结构. 授权策略由一个或多个需求组成,并在 ...

  4. samtools常用命令详解

    samtools的说明文档:http://samtools.sourceforge.net/samtools.shtmlsamtools是一个用于操作sam和bam文件的工具合集.包含有许多命令.以下 ...

  5. Java高并发同步Volatile的使用

    引言: 在多线程并发编程中synchronized和Volatile都扮演着重要的角色,Volatile是轻量级的synchronized,它在多处理器开发中保证了共享变量的“可见性”. 可见性的意思 ...

  6. C++中的 :: 用法

    ::是运算符中等级最高的,它分为三种:1)global scope(全局作用域符),用法(::name)2)class scope(类作用域符),用法(class::name)3)namespace ...

  7. SQL IN ANY ，（all any） 区别

    EXITS 和 IN 的区别: 从效率来看: 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ; T1数据量小而T ...

  8. 51nod1089(最长回文子串之manacher算法)

    题目链接: https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1089 题意:中文题诶~ 思路: 我前面做的那道回文子串的题 ...

  9. <s:property value=""/> 怎么截取返回值的固定长度的字符串

    ------背景-------------------- 列表中某一个字段的内容较长,显示不美观的情况下可以选择使用xxxxx....来显示,具体内容可见详情. ------解决方案--------- ...

  10. thinkphp中的setInc、setDec方法

    thinkphp中setInc.setDec方法 可用于统计字段(通常是数字类型的字段)的更新,例如积分,等级,登陆次数等 必须配合连贯操作where一起使用 $User = M("User ...