Display byte[] array image from database in Details page template using ASP.NET MVC

Question

When I try to display a byte[] array image inside a Details page template using:

public FileContentResult RenderPhoto(byte[] photo)
{
    // var array = (byte[])Session["photo"];
    // return File(array, "image/jpeg");

    return File(photo, "image/jpeg");
}

<img src="@Url.Action("RenderPhoto", Model.Photo)"/>

photo is null.

If I store student.Photo in Session:

//
// GET: /Student/Details/5

public ViewResult Details(int id)
{
    Student student = db.Students.Find(id);

    Session["photo"] = student.Photo;

    return View(student);
}

and try to display the image retrieving the value from Session (commented lines above) it works.

Why I'm getting a null value in the first case?

After passing student to the View in ViewResult Details(int id), Model.Photo doesn't hold that value anymore?

Darin Dimitrov · Accepted Answer · 2011-04-21 05:57:30Z

11

Why I'm getting a null value in the first case?

You cannot pass a byte array to the server in an <img> tag. The <img> tag simply sends a GET request to the designated resource. The correct way to do this is to use an id:

<img src="@Url.Action("RenderPhoto", new { photoId = Model.PhotoId })" />

and then:

public ActionResult RenderPhoto(int photoId)
{
    byte[] photo = FetchPhotoFromDb(photoId);
    return File(photo, "image/jpeg");
}

answered Apr 21, 2011 at 5:57

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

2 Comments

Leniel Maccaferri Over a year ago

if I do this I'll query the database just to get the photo. I already have the photo when I load student in the Details ViewResult method.

Leniel Maccaferri Over a year ago

I'm starting to think of implementing this in a different way. I'll have a model to represent a Photo (a table in the DB). I'll then create a relationship between Student and Photo. This way this scenario will make more sense. Student will have a PhotoId field that I'll use to query the DB.

Martin Booth · Accepted Answer · 2011-04-21 06:14:44Z

1

First of all

Url.Action("RenderPhoto", Model.Photo)

Will not work, Model.Photo (presumably your byte array) will be treated as an Object to infer route values of. It'll generate a route with the public properties of an Array object, probably along the lines of

?IsFixedSize=true&IsReadOnly=false&Length=255

That is going to be a pretty unhelpful url. Once the page loads in the browser, the browser will request that image, calling your RenderPhoto method, but there is no parameter called photo, so binding would fail, and even if there was a parameter called photo there (AFAIK) no logic in the DefaultModelBinder for creating a byte array from a string, hence photo is null.

What you need to do is pass an anonymous object with an Id property into Url.Action

Url.Action("RenderPhoto", new { Id = Model.PhotoId })

That will be converted to a querystring possibly along the lines of the following (but it depends on your routes)

/xxx/RenderPhoto/25

And you then need to retreive the data for the photo in your RenderPhoto method

Martin

answered Apr 21, 2011 at 6:14

Martin Booth

8,59533 silver badges31 bronze badges

1 Comment

Leniel Maccaferri Over a year ago

that's it man. I was getting something like that string you posted above with the public properties of the array object. As I said I'll implement it in a different way so that I do not have to go to the database one more time just to get the photo. Student will have only the PhotoId and not the Photo itself.

Collectives™ on Stack Overflow

Display byte[] array image from database in Details page template using ASP.NET MVC

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related