Nextjs's Images component is blocked by Cloudfare R2
Hi guys, i run into some troubles when configuring R2 with Vercel image optimization. So i stored my images in r2 and that bucket connects to my domain, which means it refuses to serve from all other domains but mine. But in my nextjs app, i am using Image component from nextjs that makes a request from, i dont know, maybe vercel's server, and it is blocked. I try to configure the CORS of my bucket like allows headers that have user agent, but it still doesnt work. Any ideas?
Thanks
2 Replies
You are using Vercel's platform, I assume?
There's other configuration you have to do on Vercel/next's end to allow you to resize remote images, including modifying your next.config.js remotePatterns:
https://nextjs.org/docs/pages/building-your-application/optimizing/images
Otherwise would need more error information to say more.
Optimizing: Images | Next.js
Optimize your images with the built-in
next/image component.Hi, thank you for letting me know that. Unfortunarely, it doesnt work even when i am trying to mess with Image component's props. But if i change my bucket to public access, not connect to my domain, it works like normal, not the case when connect to my domain
Just one additional information, the requests made to cloudfare r2 dont have the referalls, it just has the user-agent, and i dont know what does that mean. I try to allow headers that has user agent but it doesnt work.