javascript - 如何在背景图像 : url()? 上设置授权 header

Question

我正在尝试通过 REST API 检索背景图像。

但是，要这样做，我需要授权。

token 可从应该加载背景图像的上下文中获得，但我不知道如何将其添加到请求中。

有什么想法吗？这可能吗？

在另一种方法中，我使用我的网络服务器为特定上下文中的所有请求添加授权。这工作正常，但不再可能。

Answer 1

一种方法是通过 Javascript 请求图像，设置正确的 header ，然后将图像显示为对象 URL/blob。这是一个例子:

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>