How to to return an image with Web API Get method

C#asp.net Web-Apiasp.net Core

C# Problem Overview


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 encoded, but does not claim to be an image."

public HttpResponseMessage Get()
{
    using (FileStream fs = new FileStream(filePath, FileMode.Open))
    {
        HttpResponseMessage response = new HttpResponseMessage(); 
        response.Content = new StreamContent(fs);
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");
        return response;
    }
} 

I see the same result in the Fiddler with this code also:

public HttpResponseMessage Get()
{
    HttpResponseMessage response = new HttpResponseMessage();
    Byte[] b = (GetImageByteArray());
    response.Content = new ByteArrayContent(b);
    response.Content.LoadIntoBufferAsync(b.Length).Wait();
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");
    return response;
}

I get the same result if I use .png format.

Appreciate your help,

C# Solutions


Solution 1 - C#

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.

Solution 2 - C#

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);;
});

Solution 3 - C#

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.

Solution 4 - C#

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJ.D.View Question on Stackoverflow
Solution 1 - C#dotnetstepView Answer on Stackoverflow
Solution 2 - C#Hien NguyenView Answer on Stackoverflow
Solution 3 - C#MarkView Answer on Stackoverflow
Solution 4 - C#Bhuwan MaharjanView Answer on Stackoverflow