Wie verwendet man ein Dateiobjekt als CSS-Bildquelle?

Question

Ich habe einen Verweis auf ein Javascript-Dateiobjekt (Bild), das vom Benutzer von einem "geöffneten Dateidialog" zur Verfügung gestellt wurde. Wie lade ich diese Bilddatei in ein CSS-Hintergrundbild, ohne zuerst alle Daten in eine Base64-Zeichenkette einlesen zu müssen?

Die Beispiele, die ich gefunden habe, verwenden einen FileReader, um die Daten zu lesen und dann in das css-Tag zu laden, aber das scheint ein bisschen ineffektiver Speicher zu sein. Da ich die Dateireferenz habe, wäre es nett, wenn ich das stattdessen irgendwie in den css-tag geben könnte und stattdessen das Bild in den Speicher strömen lassen würde. Der URL() - Wrapper für "background-image" unterstützt lokale Dateinamen, aber aus Sicherheitsgründen ist der vollständige Pfad der Datei für mein Skript nicht verfügbar, so dass ich das nicht verwenden kann.

Irgendwelche Vorschläge?

Answer 1

Nehmen wir an, Sie haben Ihr Dateiobjekt in einer Variablen namens file.

var url = URL.createObjectURL(file) 
yourElement.style.background = `url(${url})` 

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL