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

Question

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

Thus, the image is not displayed as a whole; he shows only a small percentage of it. The others disappeared, and something seemed to stop loading it at some point. 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 am inserting something like this into an aspx file:

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

How do I change it to work with Internet Explorer?

Answer 1

I already have such a problem. The main reason for this incompatibility is the runat="server" attribute in the image tag, and possibly 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 the code behind :

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