Use jQuery load with a custom http handler ashx file to show a png

Question

I have a custom handler (ImageHandler.ashx) that works fine when browsed to. It locates a zip file on the server, unzips it and saves a bitmap to the OutputStream. When I try to use jQuery load using the ashx my png content comes back as encoded, garbled characters rather than displaying the image.

Bitmap convertedImg = new Bitmap(zInStream);
convertedImg.Save(context.Response.OutputStream, ImageFormat.Png);

Answer 1

That is because what you are requesting from the server is an image, it's not HTML code that shows an image.

Instead of using the load method, just create an image element with the URL to the handler as source:

$('#SomeElement').append($('<img/>', { src: 'ImageHandler.ashx', alt: 'An image' }));

Note: If the zip file contains a PNG image, then you don't have to unpack it to a Bitmap object and then pack it to PNG format again, you can just send the contents of the zip stream directly to the response stream.