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

<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. UI第九节——UIProgressView

    - (void)viewDidLoad {    [super viewDidLoad];        // 实例化 UIProgressView,高度是固定的    UIProgressView ...

  2. js的包管理工具bower安装

    bower需要:node 和 git node安装包下载:http://blog.csdn.net/myan/article/details/2028545 Git安装: 选择第二项:Use Git ...

  3. Flask 吐血400错误

    的确地址或者method不匹配,这个容易解决 在后端中取到了form中不存在的元素! 这个很麻烦,特别form里面的信息比较多时!这个需要一一排查.另外取元素时最好用 request.form.get ...

  4. postgresql 中replace 函数

    select replace(字段名,E'\r','') from 表名 where 字段名 like E'%\r%';:  查看修改后结果,并不真实修改数据库 update 表名 set 字段名=r ...

  5. virtualbox之usb设备的分配

    来源:http://www.cnblogs.com/fsjohnhuang/p/3987545.html 首先下载安装virtualbox的扩展包,因为box原本不支持usb设备.www.virtua ...

  6. c/c++ printf

    %d int %s string %p point值 %c char %lu long unsigned int

  7. ASP.NET MVC随想录——锋利的KATANA

    正如上篇文章所述那样,OWIN在Web Server与Web Application之间定义了一套规范(Specs),意在解耦Web Server与Web Application,从而推进跨平台的实现 ...

  8. JavaScript高级程序设计学习笔记--BOM

    window对象 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMScript规定的G ...

  9. 网络编程之addrinfo

    addrinfo结构体定义如下: typedef struct addrinfo { int ai_flags;//指示在getaddrinfo函数中使用的选项的标志. int ai_family; ...

  10. 继承的小DEMO

    代码如下 Student.java package four.com; public class Student extends Person { // private String name; // ...