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

<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. [Python] 利用Django进行Web开发系列（二）

    1 编写第一个静态页面——Hello world页面 在上一篇博客<[Python] 利用Django进行Web开发系列(一)>中,我们创建了自己的目录mysite. Step1:创建视图 ...

  2. make 和 makefile 的关系

    程序的 编译 和 链接 要先总结 make 和 makefile,就需要先了解下面这个过程: 预编译:也叫预处理,进行一些文本替换工作,比如将 #define 定义的内容,在代码中进行替换: 编译:将 ...

  3. PCA本质和SVD

    一.一些概念 线性相关:其中一个向量可以由其他向量线性表出. 线性无关:其中一个向量不可以由其他向量线性表出,或者另一种说法是找不到一个X不等于0,能够使得AX=0.如果对于一个矩阵A来说它的列是线性 ...

  4. mysql命令导出导入数据库

    命令导出数据库: mysqldump -h[主机所在IP] -u[用户名] -p [要导出的数据库]>[导出的路径//[文件名].sql] 命令导入数据库: 1>首先,我们应该在cmd中进 ...

  5. Android Activity的加载的模式

    ---恢复内容开始--- 本文来自http://www.cnblogs.com/lwbqqyumidi/p/3771542.html launchMode在多个Activity跳转的过程中扮演着重要的 ...

  6. Ajax方法提交整个表单的信息

    <pre>$.ajax({                 cache: true,                 type: "POST",             ...

  7. mysql 最大连接数 & 连接池

    MySQL最大连接数 关于最大连接数:http://mg123.lofter.com/post/1a5f3e_996f838 可以通过修改配置文件(默认/etc/my.cnf)中的"mysq ...

  8. 音频指纹(Philips)

    参考<A Highly Robust Audio Fingerprinting System> Philips 音频指纹提取流程: 仿真效果: 第一个图为歌曲1的第一个指纹. 第二个图为歌 ...

  9. NPOI导出EXCEL 打印设置分页及打印标题

    在用NPOI导出EXCEL的时候设置分页,在网上有查到用sheet1.SetRowBreak(i)方法,但一直都没有起到作用.经过研究是要设置  sheet1.FitToPage = false; 而 ...

  10. 严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis

    一个让我崩溃的问题 感谢:http://blog.csdn.net/itlionwoo/article/details/17523371