How can I render an image in asp.net mvc?

Question

I have a sample I'm building, that's using the Northwind database. I have a view in which I show all the products for a specifc category and use a ul to generate items with an image and the products name and price.

I have used the code here, http://blogs.msdn.com/b/miah/archive/2008/11/13/extending-mvc-returning-an-image-from-a-controller-action.aspx .

And have gotten to the point that if I right-click an image on my page I get the follow for the image url.

This is the action method I provided, which just takes the Categores ID. /image/show/1

My action method in my ImageController is as follows:

    //
    // GET: /Image/Show
    public ActionResult Show(int id)
    {
        var category = northwind.AllCategories().Single(c => c.CategoryID == id);
        byte[] imageByte = category.Picture;
        string contentType = "image/jpeg";

        return this.Image(imageByte, contentType);
    }

Note: Picture is a byte[]

I then call it in my view like this. (product is the Model for my view)

But I still can't get the image to be displayed.

Is the image displayed correctly when you navigate to the action's URL (/image/show/1)? If so, there is an error in the way you embed the image in your HTML. Otherwise, inspect the data returned by your method using Fiddler2 or similar. — LorenzCK
– LorenzCK, Commented Aug 22, 2010 at 9:57

Akyegane · Accepted Answer · 2010-08-22 11:03:06Z

11

Change action

public FileContentResult Show(int id)
{
    var category = northwind.AllCategories().Single(c => c.CategoryID == id);
    byte[] imageByte = category.Picture;
    string contentType = "image/jpeg";

    return File(imageByte, contentType);
}

and send a product instance to view and try this in View

<img src="<%: Url.Action("Show","Image",new { id = Model.Category.CategoryID  }) %>" />

edited Aug 22, 2010 at 11:03

answered Aug 22, 2010 at 10:51

Akyegane

9056 silver badges15 bronze badges

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

1 Comment

Carl Weis Over a year ago

You got it. Thanks for the help, just realized you had exactly what I needed.

Ladislav Mrnka · Accepted Answer · 2010-08-22 10:15:58Z

1

Try to use this method instead:

public FileContentResult Show(int id)
{
  var category = northwind.AllCategories().Single(c => c.CategoryID == id);  
  byte[] imageByte = category.Picture;  
  string contentType = "image/jpeg";
  return File(imageByte, contentType);
}

This should be basic approach if you don't use that extension. If this works the error is in extension if this doesn't work the error is somewhere else - probably in routing. Also check Gustav's answer!

answered Aug 22, 2010 at 10:15

Ladislav Mrnka

365k60 gold badges666 silver badges673 bronze badges

2 Comments

Carl Weis Over a year ago

I changed the method, but still no image is displayed. The url for the image show's to be /Image/Show?CategoryID=1 and my route for the page is /Products/Browse/Beverages for example

Carl Weis Over a year ago

Turns out I had to use an anoynomus type <img src='<%= Url.Action( "Show", "Image", new {id = product.Category.CategoryID } ) %>' so that the route was /Image/Show/1, instead of /Image/Show?CategoryID=1. That and of course need to update the images in Northwind from bitmap to Jpeg. Thanks for the help. :)

ggarber · Accepted Answer · 2010-08-22 09:51:17Z

0

I'm not sure if that is the problem you have, but I always capitalize the action and controller names:

<%= Url.Action( "Show", "Image", new { id = product.Category.CategoryID } ) %>

answered Aug 22, 2010 at 9:51

ggarber

8,3605 gold badges29 silver badges33 bronze badges

Comments

Carl Weis · Accepted Answer · 2010-08-22 11:32:25Z

0

Turns out I had to use an anoynomus type ' so that the route was /Image/Show/1, instead of /Image/Show?CategoryID=1. That and of course needed to update the images in Northwind from bitmap to Jpeg.

answered Aug 22, 2010 at 11:32

Carl Weis

7,11215 gold badges66 silver badges86 bronze badges

Collectives™ on Stack Overflow

How can I render an image in asp.net mvc?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related