图像未显示在IE表单base64中

Question

我将图像存储在CLOB中的Oracle DB中，当我使用图像源中的base64将其转换回来时，它在Chrome＆amp; Firefox但在Internet Explorer中。图像的某些部分显示在剩余图片中出现的点之后。

我尝试通过简单的以及通过编程但同样的结果来解决这个问题。

这是我的 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>

此处@images.IMG包含没有任何转化的简单clob数据 我正在使用Fancybox JQuery插件来显示图片。

C＃方式

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

您可以将多少数据加入data uri。 Internet Explorer的限制低于Firefox或Chrome（不同版本之间）。

简而言之：不要那样做。数据方案仅适用于小文件。

Answer 2

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

如果您想绕过此限制，可以将base64图片放在img标记的src属性中：

<img src="Base64StuffGoesHere" />

This question对如何在不使用href属性的情况下使fancybox工作有一些很好的答案。

Answer 3

特别感谢@Yuriy

这项工作适用于所有浏览者

 <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

不是发送Clob字符串，而是创建一个ashx处理程序并在ashx中写下你的内容。

有关详细信息，请参阅

Display Image using ashx Handler

Answer 5

这对我有用：为图片添加ID属性并添加指向此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

是的，由于此uri限制，您不应该使用定位标记，而是可以尝试以下操作：

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