How to to return an image with Web API Get method

Question

I need to return an image with a Web API Get method. The code below seems to work fine except that I get this message in the Fiddler\'s ImageView window, \"This response is

Answer 1

If I understand correctly then you are asking specific to asp.net core. In ASP.net core HttpResponseMessage is not a way to return result the way we used to do in ASP.net web api 2.

In asp.net core ( WEB API ) simply look like this.

[HttpGet]
public IActionResult Get()
{            
    Byte[] b = System.IO.File.ReadAllBytes(@"E:\\Test.jpg");   // You can use your own method over here.         
    return File(b, "image/jpeg");
}

Note: As you mention that in Fiddler Imageview you see message like this "his response is encoded, but does not claim to be an image." because ASP.net core consider HttpResponseMessage as simple class and convert into json or xml.

Answer 2

In addition to previous answers, use this to get image based on hosting environment within System.Web.Hosting namespace.

var imageUrl = HostingEnvironment.MapPath("~/images/photo.png");

and use imageUrl it to find byte[] of the image, and process with proper content-type like image/jpeg

byte[] binaryImage = File.ReadAllBytes(imageUrl);   
return File(binaryImage , "image/jpeg");

Make sure you have referenced System.IO namespace for File static method.

Answer 3

Adding this answer because those comments are easy to miss (like I nearly did).

Suggested by Jussi Palo (using a PhysicalFileResult):

[HttpGet]
public IActionResult Get()
{        
    return PhysicalFile(@"E:\\Test.jpg", "image/jpeg");
}

• A nice single liner that handles things like 206 partial.

Suggested by Tseng (using an overload of the FileContentResult constructor that accepts a stream):

[HttpGet]
public IActionResult Get()
{        
    FileStream stream = File.Open(@"E:\\Test.jpg");
    return File(stream, "image/jpeg");
}

• Useful if your stream is coming from somewhere else (like an embedded resource).

For RL remember to check the file/resource exists, and return 404 if not.

Answer 4

This is the way I get image from API in my project. I share for whom concern.

Image content save to Images folder in server and image name saved to Database.

[Route("api/dashboard/GetImage")]
public byte[] GetImage(int componentId)
{
            using (var dashboardService = new DashboardService())
            {
                var component = dashboardService.GetImage(componentId);
                var context = HttpContext.Current;
                string filePath = context.Server.MapPath("~/Images/" + component.ImageName);
                context.Response.ContentType = "image/jpeg";
                using (FileStream fileStream = new FileStream(filePath, FileMode.Open))
                {
                    using (var memoryStream = new MemoryStream())
                    {
                        fileStream.CopyTo(memoryStream);
                        Bitmap image = new Bitmap(1, 1);
                        image.Save(memoryStream, ImageFormat.Jpeg);

                        byte[] byteImage = memoryStream.ToArray();
                        return byteImage;
                    }
                }
            }
}

Get image content in Angular

this.dashboardService.getImage(this.componentId)
    .subscribe((blob: any) => {
      let objectURL = 'data:image/jpeg;base64,' + blob;
      this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(objectURL);;
});