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

Darin Dimitrov · Accepted Answer · 2012-02-05 13:13:47Z

22

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.

edited Feb 5, 2012 at 13:13

answered Feb 5, 2012 at 13:02

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

JMon Over a year ago

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

Darin Dimitrov Over a year ago

@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 Over a year ago

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

JMon Over a year ago

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 Over a year ago

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

|

Collectives™ on Stack Overflow

displaying image from db in Razor/MVC3

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related