Next Images: support auth headers

[josias-r]

When working with the next/images component images are optimized and compiled on built time, which is awesome!
I would still love it though if it was possible either through a prop of the component, or a setting inside next.config.json to define headers that are used to request the images originally.

This would allow you to use an auth token for your images, which is used during build time only. This way you can protect your backend which is not meant to be accessed directly.

My idea could be implemented in various ways:

• Pass a header prop to the images component
• Add a specific imagesHeaders setting to next.config.json
• Add a imagesHeaders setting to the domains array inside next.config.json (i.e. domains: [{name: "mydomain.com", options: { imagesHeaders: { Auth: `Bearer ${process.env.MYDOMAIN_IMAGES_HEADER}` } }}])

[pitgrap]

Hi, similiar question:

Just tried next/image with manually configured (remote) domains out. But I get 401, because the remote domain needs a special header. I guess, it is not possible to configure this at the moment? I'm using next 12.

[dev-tayy]

Hi @pitgrap,

I am in a similar situation here, were you able to come up with a work-around ?

[pitgrap]

My work-around is not to use next/image.

[dev-tayy]

So what did you use please? @pitgrap

[pitgrap]

i just created a simple <img> component by myself.

[sreuter]

Not sure why this was closed without comment, but I'd be interested in this as well.