使用EF5存储模型图像并在MVC视图中检索的最佳方法

Question

我正在寻找将图像数据存储在模型中然后在视图中检索它的最佳方法。

目前我有：

public class Product
{
  public int Id { get; set; }
  public byte[] Image { get; set; }
}

然后我有一个控制器

public class ProductController
{
  public ActionResult List()
  {
    return View(Repository.GetAll())
  }
  public FileContentResult GetImage(int id)
  {
    Product p = Repository.GetById(id);
    return new FileContentResult(p.Image, "image/jpeg");
  }
}

一个看法...

@model IEnumerable<Product>
@foreach(var product in Model)
{
  <img src="@Url.Action("GetImage", "Person", new { id = item.Id })" alt="Person Image" />
}

发生的事情就是当我在列表中获得越来越多的产品时，图像开始在屏幕上闪烁，因为它可以立即加载。

我正在发布到Azure所以我不能真的只是将byte[]更改为string并在~/Images/ProductImage.jpeg查找string ，因为每次我想要添加新产品时都必须发布网站（如据我所知）。

我只是在寻找另一种方法来做这个或者为什么我的视图上的图像逐渐出现并且一个接一个地闪现而不是立即闪现的原因？

Answer 1

图像“闪烁”而不是即时，因为您的浏览器必须返回到每个图像的服务器。 许多浏览器都限制了在任何给定时间可以打开多少额外链接（css文件，js文件，图像文件等）。 这就是为什么你的图像不会立即出现的原因。

您可以做的一些事情来帮助：

• 如果您的图像不经常更改，请在GetImage操作中添加[OutputCache(...)]属性。 这样，图像将缓存在服务器和/或客户端上以加快加载速度。
• 将文件本地存储在服务器上而不是数据库中。 这将使您的IIS直接以静态文件的形式访问文件，并避免使用MVC管道。
• 将文件保留在数据库中，但在从数据库中检索文件时将它们缓存在服务器上（例如，在App_Data下）。 这样可以避免数据库访问。

编辑：

• 将图像文件存储在可公开访问（或半公开）的Azure blob中。 你的img src标签会直接指向blob进行访问。

Answer 2

其中一种方法是直接从字节数组中显示图像：

<img src="data:image/png; base64, @Convert.ToBase64String(product.Image)">

应该适用于小图像。 您可能还希望存储图像MIME，以便区分data / png和data / jpg等。

这应该立即加载图像，因为它们将是发送到视图的模型的一部分。