Angular 2 Deaktivieren Bereinigen

Question

Ich versuche Base64 String in <img src='data:image/png;base64,${Here}' zu rendern.

Aber immer wenn ich versuche, es zu rendern, ng2 meine Base64-String vor dem Rendern zu bereinigen fügt etwas in meinem Wert hinzu, bevor es in DOM angezeigt wird. Ich habe eine Umgehung (mit DomSanitizer) gefunden, aber es funktioniert nicht mit den neuesten Versionen.

Hier ist mein Markup:

<img alt="RegularImage" src="data:image/png;base64,{{imgBase64}}"> 

Und hier ist mein Bestandteil:

imgBase64="SomeBase64StringFetchedSomehow"; 

Aber angular2 ist in der Konsole nächste Meldung zeigt - WARNING: sanitizing unsafe URL value

Wie NG2 zu verhindern, desinfizierende meine Base64-Zeichenfolge?

aktualisieren

get getImg() { 
    return this._sanitizer.sanitize(SecurityContext.URL,`data:image/png;base64,${this.img}`); 
} 

dieses Problem nicht lösen Hat. DomSanitizer Klasse existiert nicht mehr in RC6

Answer 1

Nach wenigen Stunden Nachforschungen habe ich endlich in der neuesten Version von ng2 gefunden ist keine DomSanitizer, die mit DI injiziert werden kann, jedoch gibt es Sanitizer. Also hier ist die Nutzung:

constructor(private _sanitizer: Sanitizer){ 
} 

get getImg() { 
    return this._sanitizer.sanitize(SecurityContext.URL, `data:image/png;base64,${this.img}`); 
} 

<input src="{{getImg}}"/> 

Wie Sie erstes Argument von sanitize Methode ist SecurityContext Beispiel sehen können, die im Grunde Enum ist. Also jetzt Sanitizer ist eine Fabrik, die die Implementierung zu verwenden basierend auf SecurityContext

wählen In meinem Fall hatte ich ein Problem, dass meine base64 zuvor gereinigt wurde, dass, warum ich nicht in der Lage war, es funktioniert zu bekommen.

Answer 2

Sie müssen Angular2 ausdrücklich sagen, dass die Zeichenfolge

vertraut

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

constructor(private sanitizer:DomSanitizer) {} 

get imgBase64() { 
    this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,$SomeBase64StringFetchedSomehow'); 
} 

<img alt="RegularImage" [src]="imgBase64"> 

Siehe auch In RC.1 some styles can't be added using binding syntax

Answer 3

Nach erfolglos bypassSecurityTrust zu bekommen versucht, ... Funktionen zu arbeiten, griff ich auf die folgenden:

@ViewChild('div_element_id') private div_element_id: ElementRef; 
... 

this.div_element_id.nativeElement.innerHTML = bypass_security_for_this_html;