So, basically I'm trying to intercept the request from the HTML-Image-Tag, so that I can add my authorization header. I'm trying to do this with Vue.js 3. I've already tried to use a ServiceWorker to do so, but this didn't work as expected. The URLs called from the HTML-Image-Tag source will redirect to a cloud image. I can intercept the request, but cannot redirect to the destination url. I'm also still getting authorization errors.

Here is my code:

// imageInterceptor.js (in root folder)
self.addEventListener('fetch', (event) => {
  console.log(event)

  const newRequest = new Request(event.request, {
    headers: {
      Authorization:
        'Bearer __My-Token__',
    },
  })
  return fetch(newRequest)
})

// Registration in main.ts
await navigator.serviceWorker.register('/imageInterceptor.js')