Question

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）没有。为什么呢？

Answer 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>

Answer 2

你的问题是你有“//”需要“逃避”以避免在控制台中看到的err_invalid_url警告

所以拿你的：

R0lGODlhCwALAIABAAAAAP///yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw

并将其转换为

R0lGODlhCwALAIABAAAAAP/%0a/%0a/yH5BAEAAAEALAAAAAALAAsAAAIUhI8Wy6zdHlxyqnTBdHqHCoERlhQAOw

它会正确显示

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

Answer 3

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

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

这似乎在Chrome和Firefox中运行得很好[我有权访问]

我猜测Chrome有一个稍微严格的base64实现，需要填充。

Answer 4

我添加了...; charset = utf-8; base64，....给我的一个文件，这对我有用，只是以为我会分享用铬工作的事情，我知道我已将图像文件添加到我的代码中，但它没有在我的客户端计算机上显示，发现它是一个chrome问题并且添加了charset解决了我的问题。

为什么Google Chrome不显示base64编码图像？

4 个答案: