Ionic 2 + Angular 2: Images prepended with 'un

Question

For some reason, some of my images are being prepended with 'unsafe:', which is causing them not to be rendered.

Q) Why is this happening and how can I fix it - Is this Angular 2 being odd with whitelisting or Ionic 2?

e.g.

<p><img src="unsafe:data:image/jpeg;base64,/9.....
<p><img src="data:image/jpeg;base64,/9.....

There is nothing wrong with the image (see here), see plunkr here

The second image is rendered from Ionic 2, the first I manually removed the prefix to show it's fine.

Answer 1

in angular 5.2.6

class:

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

Template

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

Answer 2

I would like to add an additional answer, so some of you will not have to debug for ages.

We also came across this problem together with Ionic+Angular on iOS (WKWebView) and found out, that Base64 data urls are also considered "unsafe" once the Base64 string contains line breaks. Either MS Windows style CRLF or LF.

We proceeded to remove those offending characters from base64 strings (an external interface was "pretty printing" them), which ultimately resolved the issue for us.

Before applying the bypass mentioned by @Dave, I would check the string.

Answer 3

For anyone experiencing this issue, I have 'solved' it by using the following:

Class:

import {DomSanitizationService} from '@angular/platform-browser';

constructor(private _DomSanitizationService: DomSanitizationService) {}

Template:

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

Where imgSrcProperty is the offending image base64 encoded.

I still think this is a bug!