渲染视图中已经存在的图像字节数据

Question

我是 MVC（来自面向对象的 C# exe 应用程序）和 Stackoverflow 的新手。我一直在努力尝试使用 MVC 有效地运行代码。我有从数据库返回的模型数据，以及该数据是一个字节字段，它是一个 jpeg 图像。在这个阶段，我已经对数据库进行了一次调用......

现在我坚持的是，一旦填充的模型数据在要渲染的视图中，我不能简单地循环它并在每个数据行中渲染图像。我发现使它工作的唯一方法是调用返回 FileContentResult 的 Action 方法，但这需要为每个图像重新调用回数据库。

对于解决方案，我尝试了三种不同的方法来解决以下问题：

1. 我似乎无法通过 Action 方法将字节数组传回控制器 满足 MVC 希望如何在 看法。 Action 方法只想接受简单类型。
2. 我显然不想让控制器返回数据库获取字节 我已经在视图中拥有的数据，尤其是当这将 我的模型数据中的每个条目都涉及多次往返。
3. 使用 Data Uri 有效，但尚无足够多的浏览器支持。

谁能告诉我处理此类问题的最佳方法是什么？我是否需要处理问题 1 或 2，或者是否有我遗漏的其他方法？

这是我最初在问题 1 中尝试使用的代码，用于将字节数组传回控制器，以便渲染 FileContentResult：

<img src=" @{Html.RenderAction("RenderMemberImage", "Home", new { @pic = x.ThumbnailData });}" />

[HttpGet]
    public FileContentResult RenderMemberImage(byte[] pic)
    {
        return new FileContentResult(pic, "mime/jpeg");
    }

Answer 1

一种可能的解决方案是将字节转换为 Base64 表示并将其保留为子对象的属性

public class Child
{
  public string ImageURL { set;get;}
  //other properties & construct etc 
}
public class Master
{
  IEnumerable<Child> Children { set;get;}
}

在您的 GET 操作中

public ActionResult SomeGetACtion()
{
  var master=new Master();

  foreach(itm in someCollection)
  {
    var child=new Child();

    byte[] imageData = GetImageByte(); //get your byte data;
    string imageBase64 = Convert.ToBase64String(imageData);
    child.ImageURL = string.Format("data:image/gif;base64,{0}", imageBase64);
    master.Children.Add(byte);
  }
}

你可以像这样在视图中使用它

@foreach(child in Model.Children)
{
  <img src="child.ImageURL" alt="loding.." />

}

Answer 2

问题是您试图从浏览器向服务器发送一个字节数组。试试这样的：

（我没有编译这个，但应该很接近）

<img src=" @{Html.Action("RenderMemberImage", "Home", new { @picId = x.Id });}" />

[HttpGet]
public FileContentResult RenderMemberImage(Guid picId)
{
    var pic = new Models.Picture(picId);//or however you get your data out of the DB
    return new FileContentResult(pic.ThumbnailData , "mime/jpeg");
}

基本上，对于页面上的每个图像，浏览器都会向服务器发出请求以获取图像。