MVC3 returning image file as byte data when using jQuery Fancybox

I have built and MVC3 application with a controller (Picture) and an action method (GetImage) that returns File contents (in my case a jpeg image)

public FileResult GetImage(int pictureID)
    {
        return File(Server.MapPath("~/Content/pic" + pictureID + ".jpg"), "image/jpeg");
    }

When I access images in my views like

<a id="single_image"><img src="/Picture/1" /></a>

..I get the image displayed properly.

But when I apply jQuery Fancybox plugin to this 开发者_运维技巧image and click on the image, it displays the pop-up with byte[] data inside (something you would get when the file mime type is missing).

What am I doing wrong?

PS: Sorry I am unable to post any images but can email it.

Just get your images directly using Html.Content in your View.

Forms

<a id="single_image">
    <img src="<%= Html.Content("~/Content/pic" + model.pictureID + ".jpg") %>" />
</a>

Razor

<a id="single_image">
    <img src="@Html.Content("~/Content/pic" + model.pictureID + ".jpg")" />
</a>

EDIT

If you're dead set on using a picture controller, then I would recommend having your PictureController have the Index action return an ActionResult

public ActionResult Image(int id)
{
    var dir = Server.MapPath("/Pictures");
    var path = Path.Combine(dir, id + ".jpg");
    return base.File(path, "image/jpeg");
}

This will however slow down your requests over a direct .jpg file access.