使用<img>标签在IE 11中无法显示大图片问题

针对你遇到的IE11无法通过<img>加载大base64图片，同时需要保证图片单页打印的需求，我整理了几个可行的解决方案：

思路一：绕过IE11的data URI大小限制，改用控制器返回图片流 #

IE11对data URI的大小有严格限制（官方上限为4MB），这就是18MB图片加载失败的核心原因。我们可以把图片的加载方式从直接嵌入base64改为通过控制器Action返回图片流，同时保留<img>标签的样式控制来实现单页打印。

具体步骤： #

1. 在控制器中新增一个用于返回图片的Action：

public ActionResult GetLargeImage()
{
    // 这里假设你通过TempData传递图片数据，也可以用Session或根据唯一标识从数据库/缓存读取
    var imageInfo = TempData["LargeImageInfo"] as Tuple<byte[], string>;
    if (imageInfo == null)
        return HttpNotFound();
    
    // 返回图片文件流
    return File(imageInfo.Item1, imageInfo.Item2);
}

2. 在CSHTML页面中修改<img>的src指向该Action，并提前将图片数据存入TempData：

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

    if (Model.readImages.Count > 0)
    {
        // 将图片字节数组和ContentType存入TempData
        var imageBytes = Convert.FromBase64String(Model.readImages[0].imageString);
        TempData["LargeImageInfo"] = new Tuple<byte[], string>(imageBytes, Model.readImages[0].contentType);
    }
}
<body style="max-height:1100px; max-width:850px" >
@if (Model.readImages.Count > 0) {
    <img src="@Url.Action("GetLargeImage")" style="max-height:1100px; max-width:850px"/>
} else {
    <p>No Image to display</p>;
}
<p>@Model.error</p>
</body>

这种方式既避开了IE11的data URI限制，又能通过<img>的样式属性控制图片显示尺寸，打印时自然会适配单页。

思路二：服务器端预先缩放图片至适配页面大小 #

如果坚持使用data URI的方式，可以在服务器端将大图片按比例缩放到你设置的max-width:850px; max-height:1100px范围内，这样缩小后的图片base64大小会远低于IE11的限制，同时直接满足单页打印的需求。

具体实现（使用System.Drawing）： #

using System.Drawing;
using System.Drawing.Drawing2D;
using System.IO;

public byte[] ResizeImageToFit(byte[] originalBytes, int maxWidth, int maxHeight)
{
    using (var inputStream = new MemoryStream(originalBytes))
    using (var originalImage = Image.FromStream(inputStream))
    {
        // 计算缩放比例，保持宽高比
        float scale = Math.Min((float)maxWidth / originalImage.Width, (float)maxHeight / originalImage.Height);
        
        // 如果图片本身就小于目标尺寸，直接返回原数据
        if (scale >= 1f)
            return originalBytes;

        int newWidth = (int)(originalImage.Width * scale);
        int newHeight = (int)(originalImage.Height * scale);

        using (var resizedImage = new Bitmap(newWidth, newHeight))
        using (var graphics = Graphics.FromImage(resizedImage))
        {
            // 保证缩放后的图片质量
            graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphics.DrawImage(originalImage, 0, 0, newWidth, newHeight);

            using (var outputStream = new MemoryStream())
            {
                // 按原图片格式保存
                resizedImage.Save(outputStream, originalImage.RawFormat);
                return outputStream.ToArray();
            }
        }
    }
}

然后在控制器中调用这个方法，将缩放后的图片转为base64传递给View：

var originalBytes = Convert.FromBase64String(imageModel.readImages[0].imageString);
var resizedBytes = ResizeImageToFit(originalBytes, 850, 1100);
imageModel.readImages[0].imageString = Convert.ToBase64String(resizedBytes);

// 将处理后的Model传递给View
return View(imageModel);

思路三：优化直接输出图片的打印体验 #

如果你想保留直接输出图片的方式，又要实现单页打印，可以改为输出一个包含<img>标签的HTML页面，而不是直接输出图片字节流。这样既利用了直接输出的大图片兼容性，又能通过样式控制打印尺寸：

1. 创建一个专门的打印视图（比如PrintImage.cshtml）：

@{ Layout = null; }
<body style="margin:0; padding:0;">
    <img src="@Model.ImageUrl" style="max-height:1100px; max-width:850px;" />
</body>

2. 在控制器中返回这个视图，而不是直接输出字节流：

// 将图片存入TempData，供GetLargeImage Action读取
TempData["LargeImageInfo"] = new Tuple<byte[], string>(bytes, imageModel.readImages[0].contentType);

// 返回打印视图，传递图片Action的URL
return View("PrintImage", new { ImageUrl = Url.Action("GetLargeImage") });

这种方式同样能兼容IE11的大图片加载，同时保证单页打印。

内容的提问来源于stack exchange，提问作者J.Cart