HTML 使用数据URL在HTML页面中嵌入图像

Posted 2021-05-24

<img src="data:image/png;base64,Qk12BQAAAAAAADYAAAAoAAAAFQAAABUAAAABABgAAAAAAEAFAAAAAAAAAAAAAAAAAAAAAAAAO6qp KqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOiO6qpTLGwTLGwTLGwTLGwTLGwTLGwTLGwTLGw TLGwAEyxsDuqqSqjoiqjoiqjoiqjoiqjoiqjoiqjoiqjoiqjoiqjojuqqUyxsEyxsEyxsEyxsEyx sEyxsEyxsEyxsABMsbBMsbA7qqkqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6I7qqlMsbBM sbBMsbBMsbBMsbBMsbBMsbAATLGwTLGwTLGwO6qpKqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOi KqOiO6qpTLGwTLGwTLGwTLGwTLGwTLGwAEyxsEyxsEyxsEyxsDuqqSqjoiqjoiqjoiqjoiqjoiqj oiqjoiqjoiqjoiqjojuqqUyxsEyxsEyxsEyxsEyxsABMsbBMsbBMsbBMsbBMsbA7qqkqo6Iqo6Iq o6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6I7qqlMsbBMsbBMsbBMsbAATLGwTLGwTLGwTLGwTLGwTLGw O6qpKqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOiO6qpTLGwTLGwTLGwAEyxsEyxsEyxsEyx sEyxsEyxsEyxsDuqqSqjoiqjoiqjoiqjoiqjoiqjoiqjoiqjoiqjoiqjojuqqUyxsEyxsABMsbBM sbBMsbBMsbBMsbBMsbBMsbBMsbA7qqkqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6I7qqlM sbAATLGwTLGwTLGwTLGwTLGwTLGwTLGwTLGwTLGwO6qpKqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOi KqOiKqOiO6qpADuqqUyxsEyxsEyxsEyxsEyxsEyxsEyxsEyxsEyxsDuqqSqjoiqjoiqjoiqjoiqj oiqjoiqjoiqjoiqjoiqjogAqo6I7qqlMsbBMsbBMsbBMsbBMsbBMsbBMsbBMsbBMsbA7qqkqo6Iq o6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6IAKqOiKqOiO6qpTLGwTLGwTLGwTLGwTLGwTLGwTLGwTLGw TLGwO6qpKqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOiACqjoiqjoiqjojuqqUyxsEyxsEyxsEyxsEyx sEyxsEyxsEyxsEyxsDuqqSqjoiqjoiqjoiqjoiqjoiqjoiqjogAqo6Iqo6Iqo6Iqo6I7qqlMsbBM sbBMsbBMsbBMsbBMsbBMsbBMsbBMsbA7qqkqo6Iqo6Iqo6Iqo6Iqo6Iqo6IAKqOiKqOiKqOiKqOi KqOiO6qpTLGwTLGwTLGwTLGwTLGwTLGwTLGwTLGwTLGwO6qpKqOiKqOiKqOiKqOiKqOiACqjoiqj oiqjoiqjoiqjoiqjojuqqUyxsEyxsEyxsEyxsEyxsEyxsEyxsEyxsEyxsDuqqSqjoiqjoiqjoiqj ogAqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6I7qqlMsbBMsbBMsbBMsbBMsbBMsbBMsbBMsbBMsbA7qqkq o6Iqo6Iqo6IAKqOiKqOiKqOiKqOiKqOiKqOiKqOiKqOiO6qpTLGwTLGwTLGwTLGwTLGwTLGwTLGw TLGwTLGwO6qpKqOiKqOiACqjoiqjoiqjoiqjoiqjoiqjoiqjoiqjoiqjojuqqUyxsEyxsEyxsEyx sEyxsEyxsEyxsEyxsEyxsDuqqSqjogAqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6Iqo6I7qqlM sbBMsbBMsbBMsbBMsbBMsbBMsbBMsbBMsbA7qqkA" />

直接在 HTML 文件中嵌入 JPEG

【中文标题】直接在 HTML 文件中嵌入 JPEG

【英文标题】：Directly embedding JPEGs in an HTML file

【发布时间】：2011-03-01 08:55:07

【问题描述】：

我可以通过使用 File-SaveAs 菜单从 IE 保存页面并选择 (Web Archive, single file (*.mht))，将 mime 编码的 JPEG 嵌入到 html 页面中。

使用 .eml 重命名此 .mht 文件可以让 Outlook 打开它并发送 HTML 电子邮件。

我的问题是：

如何将 JPEG 图像直接嵌入 HTML 页面（无外部文件）。图像是否只是在 HTML 中内嵌了 mime 编码？

这似乎是 IE 特定的。其他浏览器是否支持此功能？

【参考方案1】：

如何将 JPEG 图像直接嵌入 HTML 页面（无外部文件）。图像是否只是在 HTML 中内嵌了 mime 编码？

正如其他回答者指出的那样，有data URIs 的概念，但 8 之前的 IE 不支持它，这使得它非常无用。

此外，数据 URI 对二进制数据进行 base64 编码，将数据量增加了 33%。

据我所知，遗憾的是，没有跨浏览器的方法可以做到这一点。

【参考方案2】：

我想你可以尝试一个data: URL（它有一个public spec），但是对于超过几百字节的任何内容都是非常邪恶的。

【讨论】：

那个，加上IE

@Pekka：所以？开发支持 IE7 的新东西是一个糟糕的主意（更容易让用户升级），而开发支持 IE6 是一种邪恶和错误的做法。

此外，数据 URI 的支持范围远比 MHT 广泛。

如果您负担得起不支持 IE7，请继续！一方面，我通常不能。

【参考方案3】：

MHT 文件不是标准的 HTML。在标准 HTML 中执行此操作的唯一方法是使用 data URIs。

【讨论】：

IE

IE8 支持有限，其中包括

好的，所以我现在有一个谷歌搜索词“数据 URI”。你有可以举的例子吗？

'MHT 文件不是标准 HTML。'正确，这就是为什么我说它似乎是特定于 IE 的。