如何在HTML文件中編碼圖像數據？

Question

我希望能夠輸出包含圖像的HTML文件（在文件本身內）。谷歌搜索，我遇到了幾個方法可以做到這一點：

• ​​
• 數據URI如<IMG SRC="data:image/gif;base64,[...]">
• <object ... >標籤（儘管使用數據URI，所以可以繼承相同限制）

但我不知道哪個更好的瀏覽器支持，或者如果有其他的選擇。

任何有這方面實踐經驗的人都可以給我建議嗎？謝謝。

Answer 1

在關於瀏覽器的支持，從Wikipedia：

數據URI目前支持 以下Web瀏覽器：

• 壁虎及其衍生物，如Mozilla Firefox
• Opera
• KDE，通過KIO輸入/輸出系統。這允許KDE瀏覽器Konqueror支持數據URI。
• Safari;雖然Safari的渲染引擎WebKit是Konqueror的KHTML引擎的衍生產品，但Mac OS X不共享KIO從屬體系結構，因此實現不共享。
• 適用於iPhone的Safari;
• Google Chrome
• Internet Explorer 8;出於安全原因，微軟對某些「不可導航」內容提供了有限的支持，例如在標籤和CSS規則中，包括擔心嵌入在數據URI中的JavaScript可能無法通過基於Web的電子郵件所使用的腳本過濾器來解釋客戶端。數據URI必須小於32k。
• TheWorld Browser;指對數據URI方案

IE不正確處理<object>代碼，請參閱here更多細節內置支持的IE外殼瀏覽器。簡而言之，你不能相信IE來顯示圖像。

​​也沒有得到很好的支持，因爲它被用於很多跨站腳本攻擊。

關於web的this有很多討論，他們都得出結論，沒有好的通用方法來嵌入圖像。如果您只需要支持一部分瀏覽器，那麼數據uri可能會工作，或者是數據uri和javascript的組合。

Answer 2

imageData更靈活，例如一些ie將數據限制爲32k。

Answer 3

數據URI方案的合理性很好的支持，除了在Internet Explorer版本8

的JavaScript的URI之前，我想，稍微好一點的支持，但如果JS是不可用的失敗。

您可以做的最好的事情是堅持外部圖像資源。

Answer 4

數據URI在< IE8中不起作用。 IE8支持他們高達32KB。