背景画像に認証ヘッダを設定するには：url（）？

Question

私はREST API経由で背景イメージを取得しようとしています。

ただし、そうするには、承認する必要があります。

トークンは、バックグラウンドイメージがロードされるはずのコンテキストから使用できますが、要求にどのように追加するかはわかりません。

アイデア？これはまったく可能ですか？

別のアプローチでは、Webサーバーを使用して特定のコンテキスト内のすべての要求に認証を追加しました。これはうまくいきましたが、もはや不可能です。

Answer 1

JavaScriptを使用して画像を要求し、正しいヘッダーを設定し、画像をオブジェクトのURL/blobとして表示することが1つの方法です。ここでは例です：

fetch('https://i.imgur.com/PLKabDV.png', { headers: { 
 
    "Content-Type": "application/json" // this header is just an example, put your token here 
 
    } }) 
 
    .then(response => response.blob()) 
 
    .then(blob => { 
 
    let img = document.getElementById('image'); 
 
    let url = URL.createObjectURL(blob); 
 
    img.style.backgroundImage = `url(${url})`; 
 
    })

<div id="image" style="width: 430px; height: 430px;"></div>