Problem with displaying image from DB using asp.net MVC 2

Question

Hello! I'm having trouble with displaying image from db. I think that method for saving image is working, because I see in DB that varbinary fields have some value, and that image type is correct. Also the size of image. But when I want to display image for product i don't get anything. Just blank space.. here is my code...

public byte[] GetImage(int productID)
    {
        Product product = products.GetByID(productID);

        byte[] imageData = product.ImageData.ToArray();

        return imageData;
    }

That code is in my controller. Second is code from view :

<% if (product.ImageData != null) { %>
    <img src='/product/getimage/<%= Html.Encode(product.ID) %>' alt=""/>
    <% } %>

I tried some solutions found here on stack overflow, and everyone do it like this, but it's working for them. I dont have any idea why images aren't displayed. When i look at source code of page at debugging i have :

<img src='/product/getimage/18' alt=""/>

I'm using .net 4.0, MVC 2, VS 2010... Thanks in advance

Answer 1

You have:

<img src='/product/getimage/18' alt=""/> 

Normally i'd say an image tag looks like this:

<img src='/product/getimage/18.jpg' alt=""/> 

Answer 2

My guess is that you have a routing issue. If the url /product/getimage/18 should work for your action you need to have a route that looks something like this:

routes.MapRoute("ProductImage",
    "product/getimage/{productID}",
    new { controller = "Product", action = "GetImage", productID = "" }
);

To confirm this you should use firebug and check the "net" tab (or set a breakpoint in your action and see if it gets hit when you load the page).

I would also recommend using the build in helpers to generate your urls (then this kind of problem will never happen). Instead of src='/product/getimage/<%= Html.Encode(product.ID) %>' you can write src='<%=Url.Action("GetImage", "Product", new { productID = product.ID })%>'

Answer 3

Try to change you method to:

public void GetImage(int productID)
{
    Product product = products.GetByID(productID);

    Response.ContentType = "image/jpeg";
    Response.BinaryWrite(product.ImageData.ToArray());

}

Answer 4

I'm not much of an expert on MVC yet - but from what I can see, I think your GetImage function needs to be an Action Method inside your controller, so it'll need to return an ActionResult?

You'll probably need to set the Content-Type header in the response, too.

This guy looks like he knows what he's talking about...

http://blogs.msdn.com/miah/archive/2008/11/13/extending-mvc-returning-an-image-from-a-controller-action.aspx

Answer 5

I needed to register routes in my global.cs file like Mathias suggested.

Also i needed to modify action in my controller to this :

public FileContentResult GetImage(int productID)
    {
        Product product = products.GetByID(productID);

        return File(product.ImageData.ToArray(), product.ImageMimeType);
    }    

I wish thank you all for your fast answers...