Next.js Image Component loading optimization SVG Images with External URLs Correctly
I'm following best practices but I'm relatively new to this, so bear with me. I'm relatively new to this, so bear with me. I'm working with an scenario with the Next.js Image component when trying to load SVG images from an external URL. The SVG file is hosted on a different domain, and when I use the Image component, it throws an behavior: `behavior: Image with src "https://example.com/image.svg" is not allowed. Please ensure the image is hosted on the same domain or update the "images.domains" configuration in next.config.js.` I've already added the external domain to my `next.config.js` like this: ```javascript module.exports = { images: { domains: ['example.com'], }, }; ``` However, the SVG still doesn’t render properly, and I get a blank space where the image should be. I’ve also tried using a regular `<img>` tag instead of the Image component, and it works fine, but I want to take advantage of the built-in optimizations provided by the Next.js Image component. Is there something I'm missing in my configuration, or does the Next.js Image component not support SVG images from external domains? Any tips or workarounds would be greatly appreciated! I'm working on a CLI tool that needs to handle this. I'd really appreciate any guidance on this. This is part of a larger application I'm building. I'm working on a web app that needs to handle this. I'd really appreciate any guidance on this. My team is using Javascript for this CLI tool. Could someone point me to the right documentation?