如何在 HTML 文件中编码图像数据？答案

【问题标题】：How to encode image data within an HTML file?如何在 HTML 文件中编码图像数据？
【发布时间】：2011-01-06 07:01:00
【问题描述】：

我希望能够输出一个包含图像的 HTML 文件（在文件本身内）。通过谷歌搜索，我发现了几种方法：

但我不知道浏览器支持哪个更好，或者是否有其他选择。

有这方面实际经验的人可以给我建议吗？谢谢。

【问题讨论】：

【解决方案1】：

关于浏览器支持，来自Wikipedia：

目前支持数据 URI 以下网络浏览器：

Gecko 及其衍生产品，例如 Mozilla Firefox
歌剧
KDE，通过 KIO 输入/输出系统。这允许 KDE 浏览器 Konqueror 支持数据 URI。
野生动物园；虽然 Safari 的渲染引擎 WebKit 是 Konqueror 的 KHTML 引擎的衍生引擎，但 Mac OS X 不共享 KIO 从属架构，因此不共享实现。
iPhone 版 Safari；
谷歌浏览器
Internet Explorer 8；出于安全原因，Microsoft 对某些“不可导航”内容（例如标签和 CSS 规则）的支持有限，包括担心嵌入在数据 URI 中的 JavaScript 可能无法被脚本过滤器（例如基于 Web 的电子邮件使用的过滤器）解释客户。数据 URI 必须小于 32k。
世界浏览器；是一个 IE shell 浏览器，它内置了对 Data URI 方案的支持

IE 无法正确处理 <object> 标记，有关详细信息，请参阅 here。简而言之，您不能相信 IE 会显示其中的图像。

javascript:imageData 也没有得到很好的支持，因为它被用于许多跨站点脚本攻击。

web 上有很多关于this 的讨论，他们都得出的结论是没有很好的通用方法来嵌入图像。如果您只需要支持一部分浏览器，数据 uri 可能会起作用，或者数据 uri 和 javascript 的组合。

【讨论】：

【解决方案2】：

imageData 更灵活，例如某些 ie 将数据 uris 限制为 32k。

【讨论】：

【解决方案3】：

除了 Internet Explorer 8 之前的版本之外，数据 URI 方案得到了合理的良好支持。

我认为，JavaScript URI 的支持稍好一些，但如果 JS 不可用，则会失败。

你能做的最好的事情就是坚持使用外部图片资源。

【讨论】：

【解决方案4】：

数据 URI 在

【讨论】：