return an image using ASP.NET Web API and display

Question

web api action :

byte[] bytes = System.IO.File
                        .ReadAllBytes(
                          HttpContext.Current.Server.MapPath("~/Images/orderedList1.png"));
var result_ = new HttpResponseMessage(HttpStatusCode.OK);
result_.Content = new ByteArrayContent(bytes);
result_.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");
return result_;

Ajax call

respond - data in console

Answer 1

You don't need to make an AJAX call to this action. Just put an <img> tag and point its src property to your Web API endpoint:

<img src="api/account/GetImageByAccountId/12345" alt="" />

or if you don't know the accountId in advance, you could construct this img tag dynamically and inject it into the DOM using javascript:

var id = '12345';
$('#someDivId').prepend('<img src="api/account/GetImageByAccountId/' + id + '" alt="" />');

and the image will be added to a container that you need to have in your DOM:

<div id="someDivId"></div>