Image not showing in IE form base64

Question

I have stored the image in Oracle DB in CLOB when i am converting it back using base64 in image source it works fine in Chrome & Firefox but in Internet Explorer. some part of the image is shown after that dots appeared in remaining Picture.

I try to solve this problem through simple as well as through programmatically but same result.

Here is my html

     <a class="fancybox" href="@images.IMG" 
data-fancybox-group="gallery"> <span style="color:#428bca;font-size:34px;margin-top:-34px;
float:right;" class="glyphicon glyphicon-picture"></span></a>

Here @images.IMG contains simple clob data without any conversion i am using Fancybox a JQuery plugin to show pictures.

C# way

byte[] byt = Convert.FromBase64String(imgclobdata);
   MemoryStream ms = new MemoryStream(byt);
   var img= "data:image/jpg;base64," + Convert.ToBase64String(ms.ToArray(), 0, ms.ToArray().Length);

Answer 1

There's a limit of how much data you can cram into data uri. Internet Explorer's limit is lower than Firefox's or Chrome's (and varies between versions).

In short: don't do that. Data scheme is acceptable only for small files.

Answer 2

Internet Explorer has a limit on maximum URL length of 2083 characters.

If you want to circumvent this limitation you can place your base64 image inside of the img tag's src attribute:

<img src="Base64StuffGoesHere" />

This question has some nice answers on how to make fancybox work without using href attributes.

Answer 3

Special Thanks to @Yuriy

This work for me in all browers

 <span style="color:#428bca;font-size:34px;margin-top:-34px;
float:right;" class="glyphicon glyphicon-picture" onclick="showImg('@images.IMG');"></span>

    function showImg(data){
 $.fancybox([
  'images/01.jpg',
  'images/02.jpg', // etc
  ],{
   // fancybox options 
   'type': 'image' // etc.
 }); // fancybox
}

Answer 4

Instead of sending Clob string, create a ashx handler and write down your content in ashx.

For details you may refer

Display Image using ashx Handler

Answer 5

This works for me : add a ID attribute to your picture and add the link to this ID

promos.Text += "<div class='recent-work-item'>";
promos.Text += "    <em>";
promos.Text += "        <img src='" + image + "' alt='" + title + "' class='img-responsive'>";
promos.Text += "        <a href='http://www.acipa.fr/Blog/post/" + url + "' target='_blank'><i class='fa fa-link'></i></a>";
// this line doesn't work on IE because URL of href is too long
//promos.Text += "        <a href='" + image + "' class='fancybox-button' title='' data-rel='fancybox-button'><i class='fa fa-search'></i></a>";

// this line works on IE because it is an internal link:
promos.Text += "        <a href='#" + postid + "' class='fancybox-button' title='' data-rel='fancybox-button'><i class='fa fa-search'></i></a>";
promos.Text += "    </em>";
promos.Text += "</div>";
// add this img with an ID for the link
promos.Text += "        <img src='" + image + "' alt='" + title + "' class='img-responsive' id='" + postid + "'>";

Answer 6

Yes, because of this uri limitation you shouldn't use anchor tag, instead you can try this:

<div class="fancybox" data-fancybox data-src="data:image/png;base64, ..." data-type="image">
 <img src="data:image/png;base64, ..." alt="image">
</div>