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 an

Answer 1

In my case, I discovered, after have banged my head against the wall several times, that a litle and innocent whitespace in the end of the image url can make Ionic/Angular issue this error.

Answer 2

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 3

in angular 5.2.6

class:

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

Template

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

Answer 4

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.