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

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!

in angular 5.2.6

class:

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

Template

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

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.