Return an image and display in UI using Web API core and Angular 7

Question

I am trying to display image in UI.

Here is my ASP.NET Web API Core Code for that.

    [Route("{id:int}/image")]
    public async Task<IActionResult> GetImage(int id)
    {
        var data = await this.designService.GetImageAsync(id);

        byte[] result = data.Data;

        return this.File(result, "image/jpeg");
    }

I followed this Link I assume above code is correct(Not sure if there is a better way to return Image - please guide me)

In component, my code looks like this.

this.service.getImageThumbnail(id).subscribe(
  baseImage => {
    this.thumbnail = baseImage;
  },
  error => (this.errorMessage = error)
);

In Service, implementation is like this

getDesignThumbnail(id: number) {
return this.http
.get(`https://localhost:44314/api/designs/${id}/thumbnail`)
.pipe(catchError(error => this.errorHandler(error)));

}

In HTML, I am displaying like this.(Not sure if this is correct)

 <img width="100" height="100" data-bind="attr: { src: thumbnail }" />

I am getting this error message

Add the getImageThumbnail implementation

Jota.Toledo
– Jota.Toledo

2019-03-24 14:56:46 +00:00
Commented Mar 24, 2019 at 14:56 — Jota.Toledo
– Jota.Toledo, Commented Mar 24, 2019 at 14:56
added the logic

Chatra
– Chatra

2019-03-24 15:16:00 +00:00
Commented Mar 24, 2019 at 15:16 — Chatra
– Chatra, Commented Mar 24, 2019 at 15:16

Hien Nguyen · Accepted Answer · 2019-03-25 12:30:58Z

1

You can return dynamic object in Web API and change way to show image in angular.

I used this way to display image from API.

[Route("{id:int}/image")]
    public async Task<dynamic> GetImage(int id)
    {
        var data = await this.designService.GetImageAsync(id);

        byte[] result = data.Data;

        return new { Image = result}
    }

In service add private sanitizer: DomSanitizer to constructor.

this.service.getImageThumbnail(id).subscribe(
  baseImage => {
    let objectURL = 'data:image/png;base64,' + baseImage.Image;

    this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
  },
  error => (this.errorMessage = error)
);

Updated: I create a demo reading a jpeg image from base64 format stored json file.

Please check your image is png or jpeg in data:image/png or data:image/jpeg https://stackblitz.com/edit/display-image-from-api

edited Mar 25, 2019 at 12:30

answered Mar 24, 2019 at 14:45

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chatra Over a year ago

still not displaying, Is there anything related to image size. the string looks very big when I put breakpoint at objectURL. objectURL has value but thumbnail is null

Collectives™ on Stack Overflow

Return an image and display in UI using Web API core and Angular 7

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related