FileContentResult render in View without specific Controller Action

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

score 5 · Accepted Answer · answered May 09 '12 at 05:55

5

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.

answered May 09 '12 at 05:55

Darin Dimitrov

1,023,142
271
3,287
2,928

Ok, so I will implement the solution that treats the image in a different request. Thanks!! – gonzalomelov May 09 '12 at 16:37
I tried this but got an error saying that it couldn't convert the FileContentResult to a byte[]. – Ciaran Gallagher Dec 10 '12 at 00:28
1

@CiaranG, that's probably because you haven't stored a `byte[]` inside `ViewBag.Image`. – Darin Dimitrov Dec 10 '12 at 06:41

score 0 · Answer 2 · answered Nov 09 '21 at 12:46

Based on the answer of @darin , if any one wants to make it via calling a controller's action:

      public FileContentResult GetFileByID(string ID)
    {
        try
        {
            // Get the object from the db
                Ent ent = Biz.GetPatientsByID(ID);
               // Convert the path to byte array (imagepath is something like: \\mysharedfolder\myimage.jpg
                byte[] doc = EFile.ConvertToByteArray(ent.ImagePath);
                string mimeType = File(doc, MimeMapping.GetMimeMapping(Path.GetFileName( ent.ImagePath))).ContentType;
                Response.AppendHeader("Content-Disposition", "inline; filename=" + Path.GetFileName(ent.ImagePath));
                return File(doc, mimeType);

   

        }
        catch (Exception ex)
        {

            throw ex;
        }

}

In the front end:

                        <img id="ItemPreview" src="@Url.Action("GetFileByID","Patient", new {ID= Model.ID })" alt="" width="350" height="350" />

Where Patient is the controller name.

FileContentResult render in View without specific Controller Action

2 Answers2