Web Api 2 - How to return an image (MemoryStream from Azure Storage) from a HTTPGET without saving to disk?

Question

I'm using Web Api 2 with C# and Azure, and having issues with how to return the image (base from Memorystream) for displaying on the page...

Here is my Controller HTTPGET

[Route("api/PhotoSubmit/GetPhoto/{id}")]
    [HttpGet]
    public HttpResponseMessage GetPhotoById(int id)
    {
        StorageServices storage = new StorageServices();
        MemoryStream ms = storage.DownloadBlob(id);
        // return what ?
    }

Here is the beginning of the servicecall :

$http({
            method: 'GET',
            url: 'api/PhotoSubmit/GetPhoto/' + $routeParams.id,
            accept: 'application/json'
        })
        .success(function(result) {
        // How do i handle the result and what HTML should i use ? <img ?
    });

Answer 1

From the client side you don't need to use $http. You can simplify the process by using plain old HTML...

<img src="/api/PhotoSubmit/GetPhoto/2232" />

For dynamic images use JQuery like this...

$('#ImageLocation').html('<img src="/api/PhotoSubmit/GetPhoto/' + intID + '" />');

The web browser will automatically do the work of making an HTTP Request for the image, saving you all the complexity.

On the server side, you can use a process like these to load the file and stream it to the client. It's important that the Server code return the correct MIME type such as...

context.Response.ContentType = "image/png";

Resources:

ASP .Net Web API downloading images as binary

...and...

Display Image using ashx Handler