CODEWITHSUNDEEP
imageangularionic2
Dave
Dave

Reputation: 5416

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

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.

Upvotes: 35

Views: 31187

Answers (6)

Anas
Anas

Reputation: 731

Alternative solution is to user ion-img:

<ion-img src="{{base64SVGString}}"></ion-img>

Upvotes: 0

Mark
Mark

Reputation: 429

It worked for me, although in Angular 11 its slightly different. The DomSanitationService is now The DomSanitizer:

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

And if you want to use this in your component html, you need to set it public:

constructor(public domSrv: DomSanitizer)

Then its easy to use:

<img *ngIf="picture" [src]="domSrv.bypassSecurityTrustUrl(picture)" />

Upvotes: 0

Nowdeen
Nowdeen

Reputation: 1440

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.

Upvotes: 0

Milad Jafari
Milad Jafari

Reputation: 975

in angular 5.2.6

class:

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

Template

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

Upvotes: 20

Wilk
Wilk

Reputation: 81

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.

Upvotes: 8

Dave
Dave

Reputation: 5416

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!

Upvotes: 55

Related Questions