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
@West African Lion 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?
<#1007476603422527558> <#752647196419031042>
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}/>@West African Lion 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?
<#1007476603422527558> <#752647196419031042>
you dont need Image optimization if you can optimize it in your nextjs proxy instead. its not that difficult
@B33fb0n3 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:
tsx
<Image src={'/your/path?access=' + accessToken}/>
West African LionOP
It sets token in authorization when nextjs server requests for download image ?
@West African Lion 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)
@B33fb0n3 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
@West African Lion 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
@West African Lion 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?
<#1007476603422527558> <#752647196419031042>
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" />