如何在MVC项目视图中展示数据库中的字节数组图片？

你已经将图片以字节数组形式存入数据库，以下是两种主流展示方案，同时解答你的疑问：

一、通过专用Action返回FileResult（推荐） #

这种方式是最常用的实现，通过单独的Action从数据库读取字节数组并返回图片文件，浏览器会像请求普通图片一样加载它，支持缓存，适合各种大小的图片。

步骤： #

1. 在Controller中添加图片获取Action
   假设你的Picture实体已扩展ContentType字段（上传时保存图片的MIME类型，比如image/jpeg），添加如下Action：

   public async Task<IActionResult> GetImage(int id)
   {
       var picture = await context.Images.FindAsync(id);
       if (picture == null || picture.Image == null)
       {
           return NotFound(); // 返回404或默认占位图片
       }
       // 返回字节数组作为图片文件，指定正确的MIME类型
       return File(picture.Image, picture.ContentType);
   }
   

   如果之前没保存ContentType，上传时可以从IFormFile获取并存入数据库：

   // 在Upload Action中修改Picture实例
   var picture = new Picture()
   {
       Name = model.Name,
       Image = data,
       ContentType = model.Data.ContentType // 从上传的IFormFile获取MIME类型
   };
   

2. 在视图中使用img标签指向该Action

   <!-- 假设视图模型包含图片的Id和Name -->
   <img src="@Url.Action("GetImage", "Image", new { id = Model.PictureId })" 
        alt="@Model.PictureName" 
        class="img-fluid" />
   

二、将字节数组转为Base64字符串嵌入视图 #

这种方式直接把图片数据编码为Base64字符串，嵌入到img标签的src属性中，无需额外的HTTP请求，但Base64编码会使数据体积增大约30%，且无法被浏览器缓存，仅适合小图标、缩略图等场景。

步骤： #

1. 在Controller或视图模型中生成Base64字符串
   推荐在Controller中处理（避免视图中过多业务逻辑）：

   public async Task<IActionResult> Index()
   {
       var pictures = await context.Images.ToListAsync();
       var displayModels = pictures.Select(p => new PictureDisplayViewModel
       {
           Id = p.Id,
           Name = p.Name,
           Base64Image = $"data:{p.ContentType};base64,{Convert.ToBase64String(p.Image)}"
       }).ToList();
       return View(displayModels);
   }
   

2. 在视图中直接使用Base64字符串

   @model IEnumerable<PictureDisplayViewModel>
   
   @foreach (var pic in Model)
   {
       <div class="picture-item">
           <h4>@pic.Name</h4>
           <img src="@pic.Base64Image" alt="@pic.Name" />
       </div>
   }
   

   如果临时需要在视图中直接转换，也可以这样写（不推荐大量使用）：

   @model Picture
   
   <img src="data:@Model.ContentType;base64,@Convert.ToBase64String(@Model.Image)" 
        alt="@Model.Name" />
   

关于你的疑问 #

• 不需要转为IFormFile：IFormFile是上传阶段用来接收客户端文件的类型，你已经将文件转为字节数组存入数据库，展示阶段完全不需要再转回IFormFile。
• Base64是可行的展示方式，但要注意其适用场景，优先推荐第一种通过Action返回FileResult的方案。

内容的提问来源于stack exchange，提问作者ivangeorgiev34