HTML 中的 BASE64 不起作用答案

【问题标题】：BASE64 in HTML is not workingHTML 中的 BASE64 不起作用
【发布时间】：2011-06-15 01:32:53
【问题描述】：

我已经尝试了所有可能的方式来使用 base64 字符串显示图像。但他们都没有工作。我在 IE6,7, Firefox 3 上测试过。请告诉我下面的代码有什么问题。

<head>

<STYLE type="text/css">
div.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
 </STYLE>
</head>
<body>
<img src="data:image/jpg;base64,968" />
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
<script type="text/javascript"  src="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
<div class="image"></div>
</body>

【问题讨论】：

我找到了this page （2005 年 7 月）为 GIF 图像完成的位置。该示例（仍然）适用于 Firefox 3.6。只是在 cmets 中这个有趣的提及可能是 URL 的大小有限......
然而，这个实现的原因，服务器是通过对图标的访问加载的，应该可以通过从那时起缓存管理（在服务器、网络、客户端）的进步来缓解。 ..

标签： html css image base64 data-uri

【解决方案1】：

我在 IE6、7、Firefox 3 上测试过

碰巧这些都不支持数据 URI（好吧，我认为是 Firefox 3，只是不太好）。所以你没有做错任何事。

如果您需要在这些浏览器中显示背景图片，只需使用传统图片文件和url()。

【讨论】：

+1，这里有一个 JS 方法来检测你的浏览器是否支持它。 weston.ruter.net/2009/05/07/detecting-support-for-data-uris
我在 firfox 3.6 上试过，有没有其他方法可以在不提供任何其他外部参考的情况下显示图像？
@articlestack：Firefox 3.6 应该正确支持数据 URI。但老实说，这值得麻烦吗？您的图像可能不会很大，因此对该图像的额外 HTTP 请求不会受到影响。
@BoltClock：即使我不正常使用base64。我仍然在寻找另一种嵌入图像的方式。所以我满足了这个要求。
@articlestack：数据 URI 对浏览器来说相对较新，所以在旧版本的 IE 被淘汰之前还没有支持。