displaying image from db in Razor/MVC3

Question

I have a table in the db, which has the following :- CountryID, CountryName, and CountryImage.

Now I am trying to display the image in the index and I have the following in the View :-

        <td>
        @if (item.Image != null)
        {
            <img src="@Model.GetImage(item.Image)" alt="@item.CountryName"/>    
        }

and then in the ViewModel I have :-

        public FileContentResult GetImage(byte[] image)
    {
        if (image != null)
            return new FileContentResult(image, "image/jpeg");
        else
        {
            return null;
        }
    }

However I cannot see the image properly.

What am I doing wrong?

Thanks in advance for your help and time

UPDATE

Ok So I have implemented the following in the View :-

        <td>
        @if (item.Image != null)
        {
            <img src="@Url.Action("GetImage", "CountryController", new { id = item.CountryID })" alt="@item.CountryName" />             
        }
    </td>

and in the CountryController :-

        public ActionResult GetImage(int id)
    {
        var firstOrDefault = db.Countries.Where(c => c.CountryID == id).FirstOrDefault();
        if (firstOrDefault != null)
        {
            byte[] image = firstOrDefault.Image;
            return File(image, "image/jpg");
        }
        else
        {
            return null;
        }
    }

but when I try to debug the code, the ActionResult GetImage is not being hit

Solution

Two possibilities.

Write a controller action instead which given an image id will return this image:

public ActionResult GetImage(int id)
{
    byte[] image = ... go and fetch the image buffer from the database given the id
    return File(image, "image/jpg");
}

and then:

<img src="@Url.Action("GetImage", "SomeController", new { id = item.Id })" alt="@item.CountryName" /> 

Obviously now in your initial model you don't need the Image property. This will be retrieved subsequently in the controller action responsible for that.

---

Another possibility is to use data URI scheme to embed the images as base64 strings but it might not be widely supported by all browsers:

<img src="data:image/jpg;base64,@(Convert.ToBase64String(item.Image))" alt="@item.CountryName" />

You don't need a controller action in this case as the images are directly embedded into your markup as base64 strings.

Comments

[JMon]

Hi Darin thanks for your answer but I still have some problem, please look at my UPDATED question

[Darin Dimitrov]

@Johann, is CountryID an integer? Is it nullable integer? Can it be empty or null? Update the type of your action argument accordingly. Also look at the FireBug console to see the request to this action whether it returned some errors (Look at the Net tab).

[JMon]

Hey Darin, my mistake! I should have put only "Country" and not "CountryController" :) Thanks a lot for your help, works now!

[JMon]

Just another question, is it possible when I do the file upload and before I save to the DB, is it possible to view the actual image? At the moment I am just getting for ex ItalyFlag.png. I wish I could see the actual flag image

[Darin Dimitrov]

How are you currently uploading those images? Are you using some client side upload component or a plain <input type="file"> field?

[Darin Dimitrov]

I don't know how your application and database is organized so it is difficult to provide you with a solution. One possibility would be to store the uploaded file on your server and use a controller action to serve a preview.

[JMon]

Ah ok so I will try to find some type of solution, not really needed at the moment but would be nice to have. Thanks for your answer! Everything works fine now!

[theiOSDude]

+1 for the base64 example... saved me making 2 lengthy calls back to the server.

[Rajshekar Reddy]

Thanks A lot Big Brother :)