Show base64 image from JSON

Ionic Framework ionic-v3
1

Hello
I´m new to Ionic. I have some question.

I become Data from JSon that works perfektly.
So when i would display the Image i become always a ErrorMessage

WARNING: sanitizing unsafe URL value data:image/jpg;base64, (see http://g.co/ng/security#xss)
unsafe:data:image/jpg;base64,:1 GET unsafe:data:image/jpg;base64, net::ERR_UNKNOWN_URL_SCHEME

This is the Code.

      <ion-avatar item-start>
              <img src="data:image/jpg;base64,{{item.foto}}">
            </ion-avatar>

Can any Body Help Me.

1 Like
2

that only IOS, you can use the safe pipe

create “SafePipe.ts”

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer} from '@angular/platform-browser';

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

using :

<img [src]="profileImage | safe"/>

3

Hello Thx
I have add the SafePipe and change the String. But i become this error Message

compiler.es5.js:1694 Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{item.foto}} | safe]
4

Hello
Has anybody a solution for my Problem?
Thx