570

纯粹出于好奇，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...);
}
4

3 回答 3

365

更新：2017-01-10

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

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

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

  • 基于 Gecko，例如 Firefox、SeaMonkey、XeroBank、Camino、Fennec 和 K-Meleon
  • Konqueror，通过 KDE 的 KIO 从属输入/输出系统
  • Opera（包括 Nintendo DSi 或 Wii 等设备）
  • 基于WebKit的，如Safari（包括iOS）、Android的浏览器、Epiphany和Midori（WebKit是Konqueror的KHTML引擎的衍生，但Mac OS X不共享KIO架构，所以实现不同），以及Webkit /基于 Chromium 的，例如 Chrome
  • 三叉戟
    • Internet Explorer 8：出于安全原因，Microsoft 已将其支持限制为某些“不可导航”的内容，包括担心嵌入在数据 URI 中的 JavaScript 可能无法被基于 Web 的电子邮件客户端使用的脚本过滤器解释。在版本 8[3] 中，数据 URI 必须小于 32 KiB。
    • 仅以下元素和/或属性[4] 支持数据 URI：
      • 对象（仅图像）
      • 图像
      • 输入类型=图像
      • 关联
    • 接受 URL 的 CSS 声明，例如 background-image、background、list-style-type、list-style 等。
    • Internet Explorer 9：Internet Explorer 9 没有 32KiB 的限制，允许在更广泛的元素中使用。
    • TheWorld Browser：一个内置支持Data URI方案的IE shell浏览器

http://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support

于 2009-07-30T15:32:32.263 回答
53

大多数现代桌面浏览器（例如 Chrome、Mozilla 和 Internet Explorer）都支持编码为数据 URL 的图像。但在某些移动浏览器中显示数据 URL 存在问题：Android Stock Browser 和 Dolphin Browser 不会显示嵌入的 JPEG。

我建议您使用以下工具进行在线 base64 编码/解码：

选中“格式化为数据 URL”选项以格式化为数据 URL。

于 2013-10-03T06:18:50.217 回答
13

Can I use ( http://caniuse.com/#feat=datauri ) 显示了对主要浏览器的支持，在 IE 上几乎没有问题。

于 2015-11-04T09:57:14.287 回答