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?

Answer 1

Try this:

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

and then simply,

<img [src]="showPage" />

As answered in this SO question.