jquery - '数据:image/jpg;base64' and jQuery image preview in Internet Explorer

Question

我得到一个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 配合使用？

Answer 1

我已经遇到这样的问题了。造成这种不兼容性的主要原因是图像标记中的 runat="server" 属性，也可能是 anchor 标记中的属性。试试这个，也许你的问题就能解决:

<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;
...