Question

I have same action in a controller that fetch from db for example a Employee with a name, age, image (byte[]).

So I store the info in ViewBag. Then in the View the specific code for the image is:

<img src="@ViewBag.Image" alt="Logo" />

But when I see the content of the response I have:

<img src="System.something.FileContentResult" alt="Logo" />

I have seen a lot of examples that gets the FileContentResult from a specific Action in a Controller for example:

(The code is an example only)

public ActionResult GetEmployeeImage (int id){
    byte[] byteArray = GetImageFromDB(id);
    FileContentData file = new File (byteArray,"image/jpg");
    return file;
}

And then render the image with:

<img src="@Url.Action("GetEmployeeImage", "Home", new { id = ViewBag.Id })" alt="Em" />

But I dont want that because I already have the image.

How can I render it to the View throw the ViewBag?

Thanks!

PD: Rendering image in a View is the same but was not concluded

Answer 1

One possibility is to use the data URI scheme. Bear in mind though that this will work only on browsers that support it. The idea is that you would embed the image data as base64 string into the src attribute of the img tag:

<img src="data:image/jpg;base64,@(Html.Raw(Convert.ToBase64String((byte[])ViewBag.Image)))" alt="" />

If on the other hand you want a solution that works in all browsers you will have to use a controller action to serve the image. So in the initial request fetch only the id, name and age properties of the employee and not the image. Then write a controller action that will take the employee id as parameter, query the database, fetch the corresponding image and return it as file result. Then inside the view point the src attribute of the img tag to this controller action.