如何在 Service Worker 中向 im​​g 请求添加请求标头？

Question

我有一个添加请求标头的服务工作者：

self.addEventListener('fetch', function(event) {
    console.log("fetching", event.request);
    const newRequest = new Request(event.request, {
        headers: {"Authorization": "Bearer XXX-my-token"}
    });
    return fetch(newRequest);
});

这在网页调用 fetch() 时有效。控制台显示接收到事件并将标头添加到请求中。

当我向页面添加新图像时它不起作用。然后，它会将接收到事件的消息记录到控制台，但不会将请求标头添加到请求中。很明显，Service Worker 确实拦截了图像请求，但不会静默修改标头。

我使用以下 JavaScript 添加图像：

    const img = document.createElement("img");
    img.setAttribute("src", "image.png");
    document.body.append(img);

我通过使用 netcat 接收请求来验证发送了哪些标头。

为什么 Service Worker 会默默地忽略我添加的标头？如何使用 Service Worker 向图像请求添加标头？来自 fetch 和 <img> 标记的请求有何不同，以便服务工作者可以将标头添加到一个而不是另一个？