'data:image/jpg;base64' 和 Internet Explorer 中的 jQuery 图像预览答案

【问题标题】：'data:image/jpg;base64' and jQuery image preview in Internet Explorer'data:image/jpg;base64' 和 Internet Explorer 中的 jQuery 图像预览
【发布时间】：2011-10-12 19:44:58
【问题描述】：

我从一个方法中得到一张Base64 编码的照片。我以编程方式将其添加为图像的 src。然后我使用jQuery lightBox 插件来显示图像的预览。在 Firefox 和 Chrome 中一切正常，但在 Internet Explorer 9 中，图像预览仅显示我的图像的几行。

所以图片没有整体显示；它只显示了一小部分。其余的都消失了，看起来好像有什么东西在某个时刻停止了加载。 Base64 没问题，在其他网络浏览器中显示整个图像，只有 Internet Explorer 存在问题。

在我的 aspx 中：

<script type="text/javascript">
    $(function () {
        $('#gallery a').lightBox({ fixedNavigation: true });
    });
</script>

<div id="gallery">
    <a id="aPhoto" runat="server">
        <img alt="photo" id="imgPhoto" runat="server" /></a>
</div>

在我的 aspx.cs 文件中：

imgPhoto.Attributes.Add("src", "data:image/jpg;base64," + base64Image);

所以我将这样的内容插入到 aspx 文件中：

imgPhoto.Attributes.Add("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");

如何修改它以使用 Internet Explorer？

【问题讨论】：

IE8最多只能支持32KB的图片数据，不过IE9应该没问题。你确定你没有以某种方式在缓存中获得失败的数据副本吗？
你有公开的测试页面吗？使用 F12 Developer Tools 控制台，检查相关图像的 SRC 属性。 完整的图像 URL 在那里吗？
@adam。是的，我确定 - 使用 Firefox 和 Chrome 显示相同的图像正常。
@madMax 不排除 IE 中的无效缓存。执行 CTRL+F5 以硬刷新页面
@adam 我已经清除了 IE 缓存。不幸的是没有帮助。非常小的图像（如 1KB）jQuery 插件可以正确显示，但大约 20KB 的图像会被剪切。它不应该与 IE 支持高达 32KB 相关，因为正如你所说，它是 IE 9。而且我使用来显示缩略图（更多超过 500KB）的图像，它在 IE 中运行良好，因此 IE 完全支持数据。单击此缩略图后，jQuery 会将它们显示得更大。

标签： jquery asp.net uri internet-explorer-9

【解决方案1】：

我已经有这样的问题了。这种不兼容的主要原因是图像标签中的runat="server" 属性，也可能是锚标签中的属性。试试这个，说不定你的问题就解决了：

<script type="text/javascript">
    $(function () {
        $('#gallery a').lightBox({ fixedNavigation: true });
    });
</script>

<div id="mainDiv" runat="server">
</div>

在code behind:

...
string innerHtml = "<div id='gallery'><a id='aPhoto'><img alt='photo' id='imgPhoto' /></a></div>";
mainDiv.innerHtml = innerHtml;
...

【讨论】：