8

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 ?
    });
halfer
  • 19,824
  • 17
  • 99
  • 186
Terje Nygård
  • 1,233
  • 6
  • 25
  • 48
  • possible duplicate of [ASP .Net Web API downloading images as binary](http://stackoverflow.com/questions/10491845/asp-net-web-api-downloading-images-as-binary) – Dalorzo Jul 27 '14 at 20:56
  • Thanks for the link :) It might help me a bit, but i still need to figure out how to handle the response on the client : string fileName = string.Format("{0}.jpg", id); FileStream fileStream = FileProvider.Open(fileName); HttpResponseMessage response = new HttpResponseMessage { Content = new StreamContent(fileStream) }; response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpg"); response.Content.Headers.ContentLength = FileProvider.GetLength(fileName); return response; – Terje Nygård Jul 27 '14 at 21:04
  • There's also some reference to a FileProvider which when i google, i only find this : http://www.piotrwalat.net/file-download-service-with-resume-support-using-asp-net-web-api/ and that's also using storage to disk it seems ? – Terje Nygård Jul 27 '14 at 21:13

1 Answers1

8

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

Community
  • 1
  • 1
Ty H.
  • 905
  • 8
  • 8
  • I am using web API and oauth, so when I use this `` because token is not set in get request, can you now how can I display image ? – gaurav bhavsar Aug 14 '15 at 09:05
  • 1
    I'm not sure how you might use oath in this case, it may be possible. What I might do to get it done quick and easy is to bypass oath for that Action using the [AllowAnonymous] attribute, then add a parameter for an auth token... and pass that token via query string. – Ty H. Aug 15 '15 at 21:10
  • I know this is old, but this isn't working for me. Could someone provide a more complete example with the appropriate server-side code? – Danny Ellis Jr. Dec 05 '16 at 17:58