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

Question

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

• javascript:imageData
• 数据URI，例如<IMG SRC="data:image/gif;base64,[...]">
• <object ... >标记（虽然它使用数据URI，因此可能会继承相同的限制）

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

任何有实际经验的人能为我提供建议吗？感谢。

Answer 1

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

  

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

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

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

数据URI不适用于＆lt; IE8。 IE8最多支持32KB。