0

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

目前我有：

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因为每次我想添加新产品时都必须发布网站（据我所知）。

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

4

2 回答 2

1

这样做的一种方法是直接从字节数组显示图像：

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

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

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

于 2013-06-06T14:44:49.527 回答
1

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

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

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

编辑：

  • 将图像文件存储在可公开访问（或半公开）的 Azure blob 中。您的imgsrc 标记将直接指向 blob 以供访问。
于 2013-06-06T14:42:13.193 回答