Ionic 2 + Angular 2: Images prepended with 'unsafe:' therefore not displaying even though they're fine

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

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!

Answer 2

in angular 5.2.6

class:

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

Template

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