Ich arbeite an einer ionic 2-Anwendung und empfange eine Fehlermeldung von der Konsole, die besagt, dass Bild und Skript nicht geladen werden, weil es gegen die CSP-Regeln verstößt.CSP Verweigert das Laden von base64 image
Wie für das Bild gespeichert wird, ist die Datenbank als Blob. Ich bin in der Lage, die Base64-Werte zu erhalten, konnte aber nicht auf der Anwendung angezeigt werden.
Index.HTML
<head>
<meta http-equiv="Content-Security-Policy" content="
img-src 'self' data: https://s-media-cache-ak0.pinimg.com;
" />
</head>
Komponente Html
<ion-card>
<img src="data:image/png;base64,{{storePhoto}}">
</ion-card>
Fehlermeldung: Refused to load the image 'unsafe:data:image/png;base64,' because it violates the following Content Security Policy directive: "img-src 'self' data: https://s-media-cache-ak0.pinimg.com".
aktualisieren
Ich versuchte mit DomSanitizer
aus Winkel, aber trifft einen anderen Fehler. Dies ist mein aktualisierter Code.
Komponente ts
import { DomSanitizer } from '@angular/platform-browser';
constructor(public DomSanitizerService : DomSanitizer){}
Komponente ts
<img [src]="_DomSanitizationService.bypassSecurityTrustUrl(data:image/png;base64,{{storePhoto}})" />
Uncaught(in promise):Error: Template parse errors:Parser Error: Got interpolation ({{}})
Haben Sie das CSP-Tag tatsächlich so hinzugefügt, dass Ihre Komponente html so ist? Weil es in Ihrer 'index.html' Datei sein muss –
Bitte verwenden Sie https://Stackoverflow.com/posts/44912876/edit, um Ihre Frage zu bearbeiten/zu aktualisieren und fügen Sie die genaue Fehlermeldung hinzu, die Sie in der Devptools Konsole Ihres Browsers sehen – sideshowbarker
@Andreas Gassmann Ja. Ich füge es in der Haupt-'index.html' nicht der Komponente html hinzu. Das tut mir leid. – aaa