嵌入Base64图像

一尘不染

html

纯粹出于好奇，Base64图像嵌入在哪些浏览器中起作用？。

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

一些例子：

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...);
}

阅读 459

2020-05-10

共1个答案

一尘不染

更新

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

现在，以下Web浏览器支持数据URI：

基于壁虎，例如Firefox，SeaMonkey，XeroBank，Camino，Fennec和K-Meleon
Konqueror，通过KDE的KIO从站输入/输出系统
Opera（包括Nintendo DSi或Wii等设备）
* 基于WebKit，例如Safari（包括iOS），Android的浏览器，Epiphany和Midori（WebKit是Konqueror的KHTML引擎的派生产品，但MacOS X不共享KIO架构，因此实现方式有所不同）以及Webkit /基于铬的，例如Chrome
Trident
- Internet Explorer
  8：出于安全原因，Microsoft已将其支持限制为某些“不可导航”的内容，其中包括担心数据URI中嵌入的JavaScript可能无法被脚本过滤器（如基于Web的电子邮件客户端使用的脚本过滤器）解释。在版本8
  [3]中，数据URI必须小于32 KiB。
- 仅以下元素和/或属性[4]支持数据URI：
  *object (images only)
  img
  input type=image
  link
- 接受URL的CSS声明，例如background-image，background，list-style-type，list-style等。
- Internet Explorer 9：Internet Explorer 9没有32KiB限制，并且允许使用更广泛的元素。> * TheWorld浏览器：IE Shell浏览器，它内置了对Data URI方案的支持

2020-05-10