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编码的图像

1 个答案: