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

Question

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

因此图像不会显示为整体; 它只显示了一小部分.其余的消失了,看起来某些东西在某个时刻停止加载它.Base64很好,在其他Web浏览器中显示整个图像,并且只有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"图像标签中的属性，也可能是锚标签中的属性。试试这个，也许你的问题就能解决：

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

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

并在后面的代码中：

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