1

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
av0000
  • 1,917
  • 6
  • 31
  • 51

1 Answers1

1

Try this:

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

and then simply,

<img [src]="showPage" />

As answered in this SO question.

Community
  • 1
  • 1
shteeven
  • 522
  • 4
  • 17
  • The image is still broken but now the source data starts with "unsafe:" – av0000 Apr 21 '17 at 21:14
  • I've seen others use DomSanitizationService instead of DomSanitizer and then also importing BROWSER_SANITIZATION_PROVIDERS and listing it as a provider. [More here.](http://stackoverflow.com/questions/38324762/angular-2-render-byte-from-web-api-as-an-image-src) – shteeven Apr 23 '17 at 18:41