使用 <img> 标签在 IE 11 中不显示大图像答案

【问题标题】：Large Images Not Showing in IE 11 Using <img> Tag使用 <img> 标签在 IE 11 中不显示大图像
【发布时间】：2019-12-19 13:45:08
【问题描述】：

我有一个 cshtml 页面，它将图像作为字符串，并将其显示在图像标记中。代码如下：

@model ReadModel
@{
    ViewBag.Title = "Display";
    ViewBag.Project = "IS";
    Layout = null;
}

<body style="max-height:1100px; max-width:850px" >
    @if (Model.readImages.Count > 0)
    {
        //only images will hit this code. Other file types are written to the Response header in the controller
        string imgSrc = String.Format("data:" + Model.readImages[0].contentType + ";base64,{0}", Model.readImages[0].imageString);
        <img src="@imgSrc"  style="max-height:1100px; max-width:850px"/>
    }
    else
    {
        <p>No Image to display</p>;
    }
    <p>@Model.error</p>
</body>

问题在于，在 IE 11 中，如果图像很大（使用 18 MB 图像失败），页面将不停地旋转，直到最终失败并只显示一个白色页面。它适用于常规尺寸的图像。

现在，正如评论所提到的，如果文件不是图像，它会通过使用 C# 将文件的字节数组写入控制器中的响应来显示，如下所示：

byte[] bytes = Convert.FromBase64String(imageModel.readImages[0].imageString);
Response.Clear();
Response.ContentType = imageModel.readImages[0].contentType;//"application/pdf";
Response.AddHeader("content-length", bytes.Length.ToString());
//write the reponse the browser
Response.BinaryWrite(bytes);
Response.AppendHeader("content-disposition", "inline; filename=" + imageModel.readImages[0].fileName);
Response.End();

上面的 C# 代码也适用于显示图像，即使是非常大的图像，但是我的要求之一是图像必须能够在单个页面上打印，因此 max-height 和 max-width 属性。

如果我使用 C# 代码编写图像，大图像将打印到 4 或 5 页。

所以我需要一种方法让 <img> 标记适用于大图像，或者让 C# 代码调整图像大小以适合 8.5 x 11 页面。

我知道 chrome 可以很好地处理这些图像，不幸的是另一个要求是让它在 IE 中工作。

选中“使用软件渲染而不是 GPU 渲染”没有帮助。

有什么想法吗？

【问题讨论】：

标签： c# html asp.net-mvc image internet-explorer

【解决方案1】：

我建议您将此 CSS 代码应用到您的 IMG 标签可能有助于在 IE 中以单页显示/打印图像。

.pp
{
  margin: 0px;
  padding: 0px;
  width: 670px; /* width: 7in; */
  height: 900px; /* or height: 9.5in; */
  clear: both;
  background-color: gray;
  page-break-after: always;
}

例子：

在此示例中测试的图像大小约为 16.2 MB。

<!doctype html>
<html>
<head>
<style>
.pp
{
  margin: 0px;
  padding: 0px;
  width: 670px; /* width: 7in; */
  height: 900px; /* or height: 9.5in; */
  clear: both;
  background-color: gray;
  page-break-after: always;
}
#cube
{ 
  position: relative;
  top: 1in;
  left: 1in;
  width: 1in;
  height: 1in;
  background-color: white;
}
</style>
</head>
<body>

<div id="cube">
<img src="https://effigis.com/wp-content/uploads/2015/02/Iunctus_SPOT5_5m_8bit_RGB_DRA_torngat_mountains_national_park_8bits_1.jpg" class="pp"></img>
</div>

</body>
</html>

带有打印预览的 IE 11 输出：

参考：

How to format CSS for 8.5x11 inch printed pages

【讨论】：