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

<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. linux命令grep及正则表达式

  2. Codeforces #261 D

    Codeforces #261 D D. Pashmak and Parmida's problem time limit per test 3 seconds memory limit per te ...

  3. CF#138 div 1 A. Bracket Sequence

    [#138 div 1 A. Bracket Sequence] [原题] A. Bracket Sequence time limit per test 2 seconds memory limit ...

  4. C和指针 第十二章 结构体 习题

    12.3 重新编写12.7,使用头和尾指针分别以一个单独的指针传递给函数,而不是作为一个节点的一部分 #include <stdio.h> #include <stdlib.h> ...

  5. PHP中计划任务

    PHP不支持多线程,有时候处理问题不是那么爽,今天谈论一下PHP定时执行的方法 PHP定时执行的三种方式实现 .windows 的计划任务 .linux的脚本程序 .让web浏览器定时刷新 windo ...

  6. Ext 修改Store初始化加载完后修改record属性。

    /** * Created by huangbaidong on 2016/9/18. * 产品组件通用Store, */ Ext.define('app.component.ebs.itemdata ...

  7. 【Network】golang 容器项目 flannel/UDP相关资料

    参考资料: flannel_百度搜索 Flannel首页.文档和下载 - 容器集群子网 - 开源中国社区 docker下基于flannel的overlay网络分析 - OPEN 开发经验库 flann ...

  8. WebService -- Java 实现之 CXF (WebService 服务器端接口)

    1. 使用Maven创建一个quickstart项目 2. 引入依赖的Jar包 <dependency> <groupId>org.apache.cxf</groupId ...

  9. Linux From Scratch - Version 7.7-systemd (中文)

    Linux From Scratch - Version 7.7-systemd: https://linux.cn/lfs/LFS-BOOK-7.7-systemd/index.html

  10. CentOS7中禁用IPV6

    helps from: https://linux.cn/article-4935-1.html vi /etc/sysctl.conf net.ipv6.conf.all.disable_ipv6 ...