c# - 在 ASP.NET MVC 中显示图像的不同方式以及何时使用哪种方式

Question

我正在使用 ASP.NET MVC4 构建一个网站来上传/显示图像，并找到了几种显示图像的方法，主要是下面的 -

1)将图片作为文件存储在服务器本地，并使用相对路径在页面上显示。

 //ImageFile is a property which holds a path to the image in the model
 <img src="@item.ImageFile" />

 When the page is rendered, this becomes a path like - <img src="/Content/Images/Jellyfish.jpg" />      

2) 将图像存储为字节数组并使用 Controller 操作检索它 -

//Use a controller action (GetImg) to get the URL of the image
<img src="@Url.Action("GetImg", "ViewPhotos", new { id = item.ID })" alt="Image" />  

When the page is rendered, this becomes a path like - <img src="/ViewPhotos/GetImg/4" alt="Image" />    

3)将图像存储为字节数组并直接在 View 中检索它-

//Directly re-construct the image in the view from the byte array (Image property of the model)
<img src="@String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(item.Image))" />  

When the page is rendered, this becomes a path like - <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAgEA....<long string> .../>

我的问题是-

1) 1 和 2 有什么区别？

1 直接提供文件路径，2 提供文件的 URL。它们在背景上是否相同，或者一种方法比另一种更好？

我检查了here它说 - Url.Action 将构建操作的路径，返回一个 url，而不是执行操作的结果。那么什么时候检索结果？

2) 当 3 用于 1 或 2 时是否会对性能产生影响？

3) 当图像尺寸较小(小于 1MB)或较大时应使用哪种方法？

如果您能指出任何对我有帮助的链接，我会很高兴。谢谢。

代码-

//型号

public class Photo
{
  public int ID { get; set; }
  public string ImageFile { get; set; }
  public byte[] Image { get; set; }
  public string Caption { get; set; }
}

// Controller

public FileContentResult GetImg(int id)
{
    byte[] byteArray = db.Photos.Find(id).Image;
    if (byteArray != null)
    {
        return new FileContentResult(byteArray, "image/jpeg");
    }
    else
    {
         return null;
    }
}

// View (方法二)

@model IEnumerable<MyPhotoLibrary.Models.Photo>
@foreach (var item in Model) {
<tr>
  <td>
    <img src="@Url.Action("GetImg", "ViewPhotos", new { id = item.ID })" alt="Image" />
  </td>
</tr>
}

// View (这是方法3)

@model IEnumerable<MyPhotoLibrary.Models.Photo>
@foreach (var item in Model) {
<tr>
  <td>
    <img src="@String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(item.Image))" />
  </td>
</tr>
}

Answer 1

我最近自己查了一下，发现了微软的研究论文 To BLOB Or Not To BLOB ，比较了将文件(例如图像)作为二进制数据存储在数据库中与传统文件系统的性能。

调查结果，粗略总结:

• 小文件(大小 > 256KB)最好作为字节数组存储在数据库中(您的第二和第三个选项)，从中可以快速检索它们并提供给用户。
• 大文件(大小 > 1MB 左右)最好存储在文件系统中(您的第一选择)，因为大型数据库 blob 的吞吐量和碎片会随着文件的增大而急剧恶化
• 在 256KB 到 1MB 之间(大致；范围是模糊的，取决于您的具体设置)性能取决于文件可能被编辑或覆盖的次数；一般来说，数据库在处理静态文件时表现更好，而文件系统在保持高吞吐量和处理频繁更改的文件的低碎片方面要好得多。

选项之间的其他区别:

选项 1 要求您的应用程序对图像所在的文件夹具有读取权限，如果用户上传或编辑图像，则应用程序将需要对该文件夹的写入权限，因为出色地。如果您使用的是共享主机(尤其是便宜或免费的主机计划)或者您的系统管理员特别偏执，这可能会很棘手。

选项 2 需要从客户端到服务器的更多调用以获取所有数据；这可能看起来像一件坏事，但它确实将页面加载分解成 block ，这可能实际上有帮助 - 页面(没有图像)将在第一次调用时加载，然后将单独请求图像，如果其中一个需要一段时间，或者有某种错误，那么页面的其余部分应该不受影响，这很好。作为jgauffin pointed out在评论中，此选项允许您为图像设置缓存，因此浏览器可以通过仅在图像发生变化时重新下载它们来节省带宽。

选项 3 要求客户将所有批处理加载到一个中，这可能需要一段时间。它还将字节数组的处理转移到客户端，这在智能手机或低端上网本等低功率客户端上可能是个问题。如果您的图像很大，最好使用服务器的 CPU 能力来实际处理从字节数组到图像文件的转换。作为jgauffin notes在评论中，这也不能很好地处理缓存——如果 View 的 HTML 的任何部分发生变化，浏览器将不得不再次下载图像

此外，这可能与您的具体情况无关，但通过单独调用加载图像可以让您在这些操作中做其他事情，例如写入调试日志或在幕后做一些其他内务处理。