在 HTML 文件的底部嵌入 base64 编码的图像

Question

我有一个这样的 HTML 文件：

<html>
<body>
<p>Some text...</p>
<img src="data:image/png;base64
<!-- Some really ugly base64 -->
">
<p>Some text...</p>
</body>
</html>

默认情况下，base64 编码的文件确实会使 HTML 文档混乱。
我想知道，是否有一种方法可以让图像链接到 HTML 文件中的另一个位置，而不是直接在重要内容之间粘贴 base64，以提高原始文件的可读性。我知道，这可以通过某种 JavaScript 解决方案实现，但我不想使用它。

Answer 1

受this answer的启发，可以使用通用content属性通过CSS指定图像内容。

我不知道哪些浏览器支持这种行为，但我强烈怀疑大多数现代浏览器都支持。

根据该答案修改的示例：

<img src="#" class="myImage" />   

<style type="text/css">
    .myImage {
  content: url('data:image/gif;base64,R0lGODlhEAAQALMPAAAAAIAAAACAAICAAAAAgIAAgACAgMDAwICAgP8AAAD/AP//AAAA//8A/wD//////yH5BAEAAA8ALAAAAAAQABAAQAQ78EkJqp10LaB759sDVh4ZiqVVTqC3om6smVvcAmz74Zioz7zMRmfC/WTAGXI0Ws5gtc+HhXz2fJagJAIAOw==');
}

</style>

在正文中放置样式元素is illegal in HTML4, and dubious in HTML 5.但是，我所知道的每个浏览器都支持它。

请记住，在 HTML 文档中使用内联图像会带来一些巨大的缺点，最明显的是会削弱可缓存性。

在 HTML 文件的底部嵌入 base64 编码的图像

Embed a base64-encoded image at the bottom of HTML file

html

base64