read image using ashx doesn't work in asp.net

Question

I am trying to use ashx to load an image from database .

when i use this code the image is loaded successfully

 <% <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Id", "~/Handler/CategoryHandler.ashx?catId={0}") %>' />

But when i use this code

   <%
            foreach (ProductCategories VARIABLE in categoriesList)
            {
                 Response.Write("<div class='wrapper-box'>" +
                                    "<a href='product/product.aspx'>" +
                                        "<img src='~/Handler/ProductHandler.ashx?Id="+VARIABLE.Id+"'/>" +
                                        "<p>"+VARIABLE.CategoryName+"</p>" +
                                    "</a>" +
                                "</div>");
            }

             %>

The image doesn't load .why the code doesn't work ?

The ashx file is like this :

 public void ProcessRequest(HttpContext context)
    {
        // Set up the response settings
        context.Response.ContentType = "image/jpeg";
        context.Response.Cache.SetCacheability(HttpCacheability.Public);
        context.Response.BufferOutput = false;
        // Setup the Size Parameter
        ImageSize size;
        switch (context.Request.QueryString["Size"])
        {
            case "S":
                size = ImageSize.Small;
                break;
            case "L":
                size = ImageSize.Large;
                break;
            default:
                size = ImageSize.Small;
                break;
        }
        // Setup the PhotoID Parameter
        Stream stream;
        if (context.Request.QueryString["Id"] != null && context.Request.QueryString["Id"] != "")
        {
            Int32 id = Convert.ToInt32(context.Request.QueryString["Id"]);
            stream = Products.GetImageStream(id, size);
            //context.Response.AddHeader("content-disposition", String.Format("attachement;filename=\"{0}\"", );
            // Get the photo from the database, if nothing is returned, get the default "placeholder" photo
            if (stream == null) return;
            // Write image stream to the response stream
            const int buffersize = 1024 * 16;
            byte[] buffer = new byte[buffersize];
            int count = stream.Read(buffer, 0, buffersize);
            while (count > 0)
            {
                context.Response.OutputStream.Write(buffer, 0, count);
                count = stream.Read(buffer, 0, buffersize);
            }
        }
    }

Answer 1

The problem is that Response.Write does not expand the ~character to the base URL, so the URL of the image that is generated in the HTML of the page is similar to this:

<img src='~/Handler/ProductHandler.ashx?Id=123' />

In order to solve this, you have to expand the URL before you use it in Response.Write:

<%
    foreach (ProductCategories VARIABLE in categoriesList)
    {
        var imgUrl = ResolveUrl("~/Handler/ProductHandler.ashx?Id=" + VARIABLE.Id.ToString());
        Response.Write("<div class='wrapper-box'>" +
            "<a href='product/product.aspx'>" +
                "<img src='" + imgUrl + "'/>" +
                "<p>"+VARIABLE.CategoryName+"</p>" +
            "</a>" +
        "</div>");
}
%>