图像未在 IE 表单 base64 中显示

Question

当我在图像源中使用 base64 将图像转换回 CLOB 时，我已将图像存储在 CLOB 中的 Oracle DB 中，它在 Chrome 和 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 的最大 URL 长度限制为 2083 个字符。

如果你想绕过这个限制，你可以将 base64 图像放在img标签的src属性中：

<img src="Base64StuffGoesHere" />

这个问题有一些关于如何在不使用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 中写下您的内容。

详情可参考

使用 ashx 处理程序显示图像

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>