2016-09-27 2 views
4

I verwenden window.URL.createObjectURL einen Blob zu erzeugen: http Verbindung für in einem img-Tag ausgewählte Bild Vorschau:angular2 und window.URL.createObjectURL

<img src=""{{itemPhoto}}"" /> 

itemPhoto ein Feld in einer Komponente definiert ist, und erhält Wird zugewiesen, wenn eine Bilddatei ausgewählt ist:

Dies funktioniert in angular2 RC1, funktioniert aber nicht mehr in 2.0.0.

Hier ist, was in das src-Attribut bekommt:

unsafe:blob:http://localhost:5555/xxxxx-xxxx-xxxx-xxxx-xxxxxxxxx 

Ich habe versucht, die folgenden nachdem einige andere Beiträge zu lesen:

this.itemPhoto = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(photos[0])); 

Dann wurde die folgende gelangt in das src-Attribut:

unsafe:SafeValue must use [property]=binding: blob:http://localhost:5555/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxx (see http://g.co/ng/security#xss) 

Irgendwelche Vorschläge?

Vielen Dank

aktualisieren: OK, ich habe wirklich nicht verstehen, dass die Fehlermeldung innerhalb src: "unsicher: SafeValue verwenden müssen [property] = Bindung: ..."

Statt von src={{itemPhoto}}, die folgenden Werke:

<img [src]="itemPhoto" /> 

Immer noch nicht sicher, warum though.

+0

Ich habe keine Zeit einen genaueren Blick auf Ihr Problem zu nehmen, aber ich hatte vor ein paar Tagen ein ähnliches Problem - ich ein pdf mit Blob angezeigt: HTTP-Link, um einen Blick darauf werfen, wie ich es geschafft, tu es hier, es könnte dir helfen: http://stackoverflow.com/questions/37046133/pdf-blob-is-not-showing-content-angular-2/39657478#39657478 –

+1

Probier mal aus, welcher Fehler das andeutet '[src ] = "itemPhoto" ' –

+0

Hallo Stefan Ich habe gerade herausgefunden, was das Problem ist. Ich verstand nicht wirklich, dass Fehlermeldung innerhalb src: "unsicher: SafeValue verwenden müssen [property] = Bindung: ..." Statt src = {{itemPhoto}}, die folgenden Werke: Immer noch nicht sicher warum. –

Antwort

5

Sie könnten einfach versuchen, was Fehler versucht zu sagen. Was es sagte, ist, dass Sie property [] Bindung anstelle von interpolation {{}} mit Attribut verwenden müssen.

[src]="itemPhoto"