Displaying image returned with REST call

Question

I want to display the image of an item the user picks. When the user clicks on an item a rest call is made and an image is retrieved but I cannot display it.

I have tried following the ideas from here and here but cannot seem to get them to work.

The basic principle (to my understanding) is that when the rest call response with (what is supposed to be) an image/png type I can format my image source in my TS like this:

import {DomSanitizer} from '@angular/platform-browser';
constructor(private _DomSanitizationService: DomSanitizer ){}

...

this.showPage = "data:image/png;base64," + rest_response;

then use "DomSanitizer" to enable this to be used in the html like this:

<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(showPage )">

but when I try to use it the image is broken and when I inspect it I see:

src="data:image/png;base64,�PNG...,㘑��" etc...

Why is this happening?

is your rest backend encoding the image to base64 before returning it? — Evans M.
– Evans M., Commented Apr 21, 2017 at 22:56

Community · Accepted Answer · 2017-05-23 12:25:54Z

1

Try this:

this.showPage = "data:image/png;base64," + rest_response;

and then simply,

<img [src]="showPage" />

As answered in this SO question.

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Apr 21, 2017 at 21:09

shteeven

5424 silver badges18 bronze badges

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

2 Comments

av0000 Over a year ago

The image is still broken but now the source data starts with "unsafe:"

shteeven Over a year ago

I've seen others use DomSanitizationService instead of DomSanitizer and then also importing BROWSER_SANITIZATION_PROVIDERS and listing it as a provider. More here.

Collectives™ on Stack Overflow

Displaying image returned with REST call

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related