Customizing image request headers

[ennioVisco]

It would be really cool and useful if this package provided an easy way to set the headers of the image requests. The use cases could be the following:

• I have a provider from which only an authorized user can fetch some images
• I have a CDN to which I want to pass some tracking information about the usage

Perhaps this could also handle some more complex behaviour that I want to add before sending the request (e.g. logging).

Any ideas/do you think these cases make sense?

[Ayax0]

I would love to see something like that. In my usecase I provide the images myself via Api Route and would like to protect them with an access token. My current workaround is to allow the access token as a query parameter in addition to a bearer token and to include it in the url of my custom provider. something like this:

import { ProviderGetImage } from "@nuxt/image";

export const getImage: ProviderGetImage = (src: string) => {
    const request = useRequestURL();
    const access_token = useState<string>("access_token");

    return {
        url: `${request.origin}/${src}?access_token=${access_token.value}`,
    };
};

[Ayax0]

I did some more digging and the way nuxt/image is currently set up it would probably be difficult to add such a function. However, I have written my own composable function which might be a valid way to do this. However, this is only a first draft and only works client-side. This problem could be solved by using a base64 string instead of the ObjectURL. However, I doubt that this would be a good idea as the amount of data transferred over the network would explode.

composables/useImageFetch.ts

import type { UseFetchOptions } from "nuxt/app";
import type { ImageOptions } from "@nuxt/image";

export default function (
  input: string,
  imgOpts?: ImageOptions,
  fetchOpts?: UseFetchOptions<string>,
) {
  const img = useImage();
  const path = img(input, imgOpts);

  return useFetch(path, {
    ...fetchOpts,
    server: false,
    transform: (data: Blob) => URL.createObjectURL(data),
  });
}

app.vue

<script setup lang="ts">
const { data } = useImageFetch(
  "test.png",
  {
    width: 100,
  },
  {
    headers: {
      Authorization: "test",
    },
  },
);
</script>

<template>
  <div>
    <img :src="data">
  </div>
</template>