Html 嵌入 Base64 图像

发布于07月30日

纯粹出于好奇，Base64图像嵌入在哪些浏览器中工作？我指的是this.

我意识到对于大多数事情来说，这通常不是一个好的解决方案，因为它会大大增加页面大小——我只是好奇.

Some examples:

HTML:个

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

CSS:

div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

推荐答案

Update: 2017-01-10

现在，所有主要浏览器都支持数据URI.IE也支持从版本8开始嵌入图像.

http://caniuse.com/#feat=datauri

以下web浏览器现在支持数据URI:

基于壁虎，如Firefox、SeaMonkey、XeroBank、Camino、Fennec和K-Meleon

Konqueror，通过KDE的KIO奴隶输入/输出系统

Opera(包括任天堂DSi或Wii等设备)

基于WebKit的，如Safari(包括iOS)、Android浏览器、Epiphany和Midori(WebKit是Konqueror的KHTML引擎的衍生产品，但Mac OS X不共享KIO架构，因此实现方式不同)，以及基于WebKit/Chrome的，如Chrome

Trident

Internet Explorer8:出于安全原因，Microsoft已将其支持限制为某些"不可导航"内容，包括担心嵌入到数据URI中的JavaScript可能无法由脚本过滤器(如基于Web的邮箱客户端使用的脚本过滤器)解释.在版本8[3]中，数据URI必须小于32 KiB.

Data URIs are supported only for the following elements and/or attributes[4]:

对象(仅限图像)

img

输入类型=图像

链接

接受URL的CSS声明，如背景图像、背景、列表样式类型、列表样式等.

Internet Explorer 9:Internet Explorer 9没有32KiB限制，允许在更广泛的元素中使用.

世界浏览器:IEshell 浏览器，内置对数据URI方案的支持