Displaying a database image with MVC page

Question

I have an MVC web application and am trying to display an image (from the database) on a page, with no success. Following various examples that I have found; I have my page "ImageTest.aspx" and a handler "ImageViewer.ashx"

The content of the handler is

<%@ WebHandler Language="C#" Class="ImageHandler" %>

using System.Web;

namespace Decri.WebClient.Views.Tablet
{
    public class ImageViewer : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "image/jpeg";
            context.Response.WriteFile("palmtree.jpg");
        }

        public bool IsReusable
        {
            get { return false; }
        }
    }
}

My "ImageTest" page contains the following (trying to get the basic functionality working, before using the database)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Image Test</h2>

    <img src="ImageViewer.ashx?id=1" alt="Dynamic Image" />

</asp:Content>

The page loads with the 'red cross' missing image icon and when in debug, the code does not stop at the breakpoint which I have placed on the "ProcessRequest" in the handler. Looking at the HTML source, the code is the same as above (with the addition of the HTML picked up from the Site.Master).

We're based off of a controller here, where the entry in the controller has been kept simple (nothing in the controller for the handler, which I understand to be correct):

    public ActionResult ImageTest()
    {
        return View();
    }

I noted that if I have a normal image in the folder and refer to it normally (without the handler) it does not display; move it to the CONTENT\IMAGES folder and it does. Tried copying the handler into the CONTENT\IMAGES folder and that' made no difference.

I'm now at somewhat of a loss and would appreciate any guidance from someone who has had this problem and got it working.

Answer 1

Try this:

context.Response.WriteFile(context.Server.MapPath("~/Content/Images/palmtree.jpg"));

Without calling MapPath the handler will look up the image in application's bin directory.

Since you're using MVC framework there's a more consistent way (you don't need to implement your own handler):

public class HelloController : Controller
{
    public ActionResult ShowImage(int id)
    {
        var fileName = "palmtree.jpg";
        var rawFile = LoadFile(); //Assuming, LoadFile() returns byte[]

        return File(rawFile, MimeMapping.GetMimeMapping(fileName), fileName);
    }
}

View:

<img src="@Url.Action("ShowImage", "Hello", new { id = 1 })" alt="Dynamic Image" />