'data:image/jpg;base64' and jQuery image preview in Internet Explorer

问题

I get a Base64 encoded photo from a method. And I add it programmatically as a src of an image. Then I use a the jQuery lightBox plugin to show a preview of a image. In Firefox and Chrome everything works fine, but in Internet Explorer 9 as an image preview shows only a few lines of my image.

So the image is not displayed as a whole; it's showing only a small percentage of it. The rest disappeared, and it looks like something stopped loading it at some moment. The Base64 is fine, in other web browsers the whole image appears, and there are only problems with Internet Explorer.

In my 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>

In my aspx.cs file:

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

So I insert something like this into the aspx file:

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

How do I modify it to work with Internet Explorer?

回答1:

I already have a problem like this. The main reason for this incompatibility is the runat="server" attribute in the image tag and maybe in the anchor tag. Try this, maybe your problem will be solved:

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

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

And in code behind:

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

来源：https://stackoverflow.com/questions/6820449/dataimage-jpgbase64-and-jquery-image-preview-in-internet-explorer

标签

jquery

ASP.NET

uri

internet-explorer-9