Entity Framework CRUD操作中浏览器无法显示数据库图片问题

我在进行Entity Framework CRUD操作时，遇到浏览器无法显示图片的问题。已通过Database First模式将图片转换为Base64字符串存入数据库，但前端无法正常渲染图片。

控制器代码（上传图片部分） #

[HttpPost]
public ActionResult Create(Product p) // Receives the products model here
{
    if (ModelState.IsValid)
    {
        EFDBFirstDatabaseEntities db = new EFDBFirstDatabaseEntities();

        // Photo managing
        if (Request.Files.Count >= 1)
        {
            var file = Request.Files[0];
            var imgBytes = new Byte[file.ContentLength];
            file.InputStream.Read(imgBytes, 0, file.ContentLength);
            var base64String = Convert.ToBase64String(imgBytes, 0, imgBytes.Length);
            p.Photo = base64String;
        }

        db.Products.Add(p); // adding new object values to the products class
        db.SaveChanges(); // updating the database 
        return RedirectToAction("Index");
    }
    else
    {
        return View();
    }
}

视图代码（显示图片部分） #

@foreach (var item in Model)
{
    <tr>
        <td><img src="data:image;base64,@item.Photo"/></td>
    </tr>
}

问题原因与解决方案 #

核心问题1：Data URI缺少具体MIME类型

当前img标签的src仅写了data:image;base64,@item.Photo，没有指定图片的具体格式（如image/jpeg、image/png），浏览器无法正确识别并解析图片。

核心问题2：文件字节流读取可能不完整

file.InputStream.Read()方法不一定能一次性读取完整的文件内容，可能导致Base64字符串损坏。

解决方案步骤：

1. 新增字段保存图片MIME类型（推荐）
   给Product模型添加PhotoContentType字段（同步更新数据库），上传时保存文件的MIME类型：

   [HttpPost]
   public ActionResult Create(Product p)
   {
       if (ModelState.IsValid)
       {
           using (EFDBFirstDatabaseEntities db = new EFDBFirstDatabaseEntities())
           {
               if (Request.Files.Count >= 1)
               {
                   var file = Request.Files[0];
                   // 保存文件MIME类型
                   p.PhotoContentType = file.ContentType;
                   var imgBytes = new Byte[file.ContentLength];
                   // 循环读取确保字节流完整
                   int bytesRead = 0;
                   while (bytesRead < file.ContentLength)
                   {
                       bytesRead += file.InputStream.Read(imgBytes, bytesRead, file.ContentLength - bytesRead);
                   }
                   p.Photo = Convert.ToBase64String(imgBytes);
               }
   
               db.Products.Add(p);
               db.SaveChanges();
               return RedirectToAction("Index");
           }
       }
       return View();
   }
   

   视图中修改为带MIME类型的Data URI，并增加空值判断：

   @foreach (var item in Model)
   {
       <tr>
           <td>
               @if (!string.IsNullOrEmpty(item.Photo) && !string.IsNullOrEmpty(item.PhotoContentType))
               {
                   <img src="data:@item.PhotoContentType;base64,@item.Photo" alt="产品图片" />
               }
               else
               {
                   <span>无图片</span>
               }
           </td>
       </tr>
   }
   

2. 临时测试方案（不推荐用于生产）
   如果暂时不想修改模型和数据库，可以尝试指定常见的图片类型（需匹配实际上传的图片格式）：

   <img src="data:image/jpeg;base64,@item.Photo" alt="产品图片" />
   

   若图片是PNG格式，替换为data:image/png;base64,@item.Photo。

3. 验证Base64字符串有效性
   从数据库中复制Photo字段的Base64字符串，到在线Base64图片解码工具中验证是否能正常生成图片，排除字符串损坏的问题。

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