Rendering image Byte data already in the view

Question

I'm new to MVC (coming from object oriented C# exe apps) and Stackoverflow. I've been struggling with trying to run code efficiently using MVC. I have Model data that returns from the database and along with that data is a field of bytes that are a jpeg image. At this stage I've made one call to the database...

Now what I'm stuck on is that once the populated model data is in the view to be rendered, I can't simply loop over it and render the image in each data row. The only thing that I've found to make it work is to call and Action method that returns a FileContentResult, but this requires a new call back to the database for each image anew.

For solutions I've tried three different approaches that have netted the following problems:

1. I can't seem to pass the byte array back to the controller via an Action method to satisfy how MVC wants to receive the FileContentResult back in the view. The Action method only wants to accept simple types.
2. I obviously don't want to ask the controller to go back to the database for the byte data that I already have in the View, especially when this will involve several round trips for each entry in my Model data.
3. Using Data Uri works, but it's not supported by enough browsers yet.

Could someone tell me what the best way to handle issues like this? Do I need to work with problem 1, or 2, or is there a different approach that I'm missing?

Here is the code I tried to use originally in problem 1 to pass the byte array back to the controller so I can render the 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

One possible solution is to convert the byte to a Base64 representation and keep that as a property of your child object

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

in your GET Action

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);
  }
}

You may use it in the view like this

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

}

Answer 2

The problem is that you're trying to send a byte array from the browser to the server. Try something like this:

(I haven't compiled this but it should be close)

<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");
}

Basically for each image on the page the browser will make a request to the server to get the image.