Next.js Image Component Not Rendering SVGs with External URLs in Production Build
I'm writing unit tests and I'm migrating some code and I tried several approaches but none seem to work. I'm currently working with an scenario with the Next.js Image component when trying to render SVG images sourced from external URLs. While developing locally, everything works perfectly, but after building the app for production with `next build` and `next start`, the SVGs unexpected result to load and result in a broken image icon. The console shows a '403 Forbidden' behavior when trying to fetch the SVG files. Here's the snippet where I am using the Image component: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="https://example.com/image.svg" alt="Description of image" width={500} height={300} /> </div> ); }; export default MyComponent; ``` I've made sure that the domain `example.com` is included in the `next.config.js` file under the `images.domains` array: ```javascript module.exports = { images: { domains: ['example.com'], }, }; ``` When I check the network tab in the browser, I see that the request to fetch the SVG is indeed going out, but it fails with a 403 behavior. I've validated that the URL is correct, and the SVG is publicly accessible. I also checked the CORS settings on the server where the SVG is hosted, and they seem configured to allow requests from any origin. Is there something specific about how Next.js handles image optimization or loading for SVGs that I might be missing? Any suggestions on how to resolve this scenario would be greatly appreciated! This is part of a larger CLI tool I'm building. What's the best practice here? What's the best practice here?