Next.js Image Component scenarios to Load Images from External Source with CORS guide
After trying multiple solutions online, I still can't figure this out... I'm working on a personal project and I've been struggling with this for a few days now and could really use some help. I'm using Next.js 12.0.7 and the built-in `<Image>` component to display images hosted on a third-party server. However, I'm running into a CORS scenario where the images do not render, and I see the behavior in the console: `Access to image at 'https://external-source.com/image.jpg' from origin 'https://mydomain.com' has been blocked by CORS policy`. I've already tried setting the `crossOrigin` attribute on the `<Image>` component like this: ```jsx <Image src="https://external-source.com/image.jpg" alt="Example Image" width={500} height={300} crossOrigin="anonymous" /> ``` I also verified that the external server has the appropriate CORS headers set, including `Access-Control-Allow-Origin: *`. In my `next.config.js`, I set up the image domains as follows: ```javascript module.exports = { images: { domains: ['external-source.com'], }, }; ``` Despite these settings, the image still fails to load. I’ve confirmed that the URL is correct and accessible directly through the browser. Are there any additional configurations or best practices for loading images from an external source in Next.js that I might be missing? Any help would be greatly appreciated! Thanks in advance! The project is a web app built with Javascript. What would be the recommended way to handle this? I'm coming from a different tech stack and learning Javascript. How would you solve this?