FileオブジェクトをCSSイメージソースとして使用するにはどうすればよいですか？

Question

"オープンファイルダイアログ"からユーザーが提供したjavascript Fileオブジェクト（image）への参照があります。最初にすべてのデータをbase64-stringに読み込むことなく、このイメージファイルをCSSの背景イメージにロードするにはどうすればよいですか？

私が見つけた例では、FileReaderを使ってデータを読み込み、それをcssタグにロードしていましたが、これはメモリの非効率的な使い方のようです。私はFile-referenceを持っているので、代わりに代わりにcssタグに渡して、画像をメモリに流すことができればいいと思います。 "background-image"のurl（） - ラッパーはローカルファイル名をサポートしていますが、セキュリティ上の理由から、Fileのフルパスはスクリプトで使用できないため、使用できません。

提案がありますか？

Answer 1

ファイルオブジェクトがfileという変数に含まれているとします。あなたについてCSSで自分の画像を参照するために[ブロブURL]（https://www.w3.org/TR/FileAPI/#url）を使用する方法

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

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