Ionic 3- Display Base64 Bild, Bereinigung unsicheren URL Wert safevalue muss [Eigenschaft] = Bindung

Question

Ich möchte Base64 Bild für Profilbild anzeigen. Das Bild wird in der Datenbank als Binärdaten gespeichert und ich habe diese Binärdaten mit btoa() in base64 konvertiert. jetzt habe ich dieses base64 Bild binden wollen ich viele Möglichkeiten versucht, aber es funktioniert nicht, bitte helfen hier ist mein Code profile.ts Code:

profilePicture(binImage) 
{ 
    if(binImage != null) 
    { 
     var imageData = btoa(binImage); 
     //console.log("Base64 Image: ",imageData); 
     this.displayImage = imageData; 
    } 
} 

profile.html Code:

<div class="profile-picture big-profile-picture" *ngIf="displayImage"> 
    <img src="data:Image/*;base64,{{displayImage}}"> 
</div> 

Es ist ein Fehler "Hygienisierung unsichere url Wert safevalue [property] verwenden müssen = Bindung" zeigt

Answer 1

einen Sanitizer hinzufügen und die URL sanieren, bevor es in Vorlage

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

... 
constructor(private sanitizer: DomSanitizer, ....) {} 
... 

profilePicture(binImage) 
{ 
    if(binImage != null) 
    { 
     var imageData = btoa(binImage); 
     //console.log("Base64 Image: ",imageData); 
     this.displayImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+imageData); 
    } 
} 

in der Vorlage nur mit:

<div class="profile-picture big-profile-picture" *ngIf="displayImage"> 
    <img src="{{displayImage}}"> 
</div>