Remote images behind authentication
Unanswered
West African Lion posted this in #help-forum
West African LionOP
Hello 👋
I faced with problem. And describe it in following.
I wanna access to remote images and remote address needs accessToken in http request authorization header.
The possible solutions are:
1- Fetch images in client side
2-Create a nextjs api handler as a proxy
But all above solutions disable image optimization (Image optimization didn't work)
There is any way in NextJS to solve my problem?
#help-forum #discussions
I faced with problem. And describe it in following.
I wanna access to remote images and remote address needs accessToken in http request authorization header.
The possible solutions are:
1- Fetch images in client side
2-Create a nextjs api handler as a proxy
But all above solutions disable image optimization (Image optimization didn't work)
There is any way in NextJS to solve my problem?
#help-forum #discussions
8 Replies
you can add you auth token to the end of the image so the specific client can access the images. It could look like this:
<Image src={'/your/path?access=' + accessToken}/>
you dont need Image optimization if you can optimize it in your nextjs proxy instead. its not that difficult
West African LionOP
It sets token in authorization when nextjs server requests for download image ?
that depends very much on the server your images are coming from (normaly you dont serve thought /public/ folder)
West African LionOP
The remote address wants token in authorization header and doesn't accept as query param
hm, then you can only point to your own api endpoint and serve the image thought that. Iirc you can serve the buffer itself and nextjs should still optimize it. You should test this
you need a proxy. you can use that proxy with next/image just fine
/api/protected-images/foo => authenticated yourbackend.com/img/foothen just
<Image src="/api/protected-images/foo" />