为什么谷歌浏览器不显示 base64 编码的图像？答案

【问题标题】：Why does Google Chrome not show base64 encoded images?为什么谷歌浏览器不显示 base64 编码的图像？
【发布时间】：2012-06-16 22:16:11
【问题描述】：

Firefox、Internet Explorer、Opera 接受以下代码：

<html>
<head>
<style type="text/css">
.minus
{
    width: 11px;
    height: 11px;
    background-image: url("data:image/gif;base64,R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw");
}
</style>
</head>
<body>
<div class="minus">
</body>
</html>

Chrome（版本 19.0.1084.56）没有。为什么？

【问题讨论】：

标签： image google-chrome base64

【解决方案1】：

这是 Chrome 中的一个错误，请参阅 bug #105725。必须填充 base64 字符串。以下解决方案可以正常工作：http://jsfiddle.net/TunfH/（我在末尾添加了==）。

<html>
<head>
<style type="text/css">
.minus
{
    width: 11px;
    height: 11px;
    background-image: url("data:image/gif;base64,R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw==");
}
</style>
</head>
<body>
<div class="minus"></div>
</body>
</html>

【讨论】：

【解决方案2】：

您的 base64 数据无效，我相信您的意思

data:image/gif;base64,R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw==

这似乎在 Chrome 和 Firefox 中运行良好 [我可以访问的内容]

我猜 Chrome 的 base64 实现稍微严格一些，并且需要填充。

【讨论】：

所有 b64 都需要填充

【解决方案3】：

您的问题是您有“//”，您需要“转义”以避免在控制台中看到 err_invalid_url 警告

所以带上你的：

R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw

并将其转换为

R0lGODlhCwALAIABAAAAAP/%0a/%0a/yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw

它会正确显示

如果图像以“/”开头，应使用相同的解决方案，将其替换为“%0a/”

【讨论】：

您好，您的回答令人困惑，因为上面的编码包含三个正斜杠字符，即“/”，但看起来您只用“%0a/”替换了两个斜杠。我错过了什么吗？还有 '%0a' 编码成什么字符？这不是换行吗？为什么换行符会避开正斜杠？如果那是特定于 URL 编码的东西，也许您可以提及参考。谢谢。
@DanielBradley 这篇文章很旧，提到的 Chrome 版本也很旧。当时只需要两个 %0a，它们阻止了 Chrome 认为是资源的“//”检测发生引用（URI）

【解决方案4】：

我将 ...;charset=utf-8;base64, .... 添加到我的一个文件中，这对我有用，只是想我会分享使用 chrome 发生的事情，我知道我将图像文件添加到我的代码中，但它没有显示在我客户的计算机上，发现这是一个 chrome 问题，添加字符集解决了我的问题。

【讨论】：

您能否提供一个实际的 HTML 示例，显示您放置该字符串的位置。