6

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?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
madMax
  • 71
  • 1
  • 1
  • 2
  • 4
    IE8 can only support up to 32KB of image data, although IE9 should be ok. Are you sure you've not got a failed copy of the data in the cache somehow? – Adam Hopkinson Jul 25 '11 at 18:24
  • Do you have a public test page? Using the F12 Developer Tools console, examine the SRC attribute of the image in question. Is the *full* image URL present there? – EricLaw Jul 25 '11 at 18:51
  • @adam. Yes I'm sure - the same image with Firefox and Chrome shows ok. – madMax Jul 25 '11 at 19:24
  • @madMax that doesn't rule out an invalid cache in IE. Do a CTRL+F5 to hard refresh the page – Adam Hopkinson Jul 25 '11 at 19:42
  • @adam I have cleared the IE cache. Unfortunately doesn't help. Very small images (like 1KB) jQuery plugin show correctly, but images about 20KB are cut. It shouldn't have correlation with IE support up to 32KB, because as you said it is IE 9. And moreover I use to show thumbnails (more than 500KB) of this images and it works fine in IE, so IE supports data fully. After clicking on this thumbnails the jQuery shows them bigger. – madMax Jul 25 '11 at 21:20

1 Answers1

0

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;
...
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
hamed aj
  • 1,960
  • 8
  • 27
  • 38