Next.js Image Component scenarios to Load SVGs with External Links
This might be a silly question, but I'm working with an scenario with the Next.js Image component when trying to load SVG images that are hosted externally. My project is running on Next.js version 12.1.0, and I've configured the `next.config.js` file to allow SVGs from the specific external domain. However, when I attempt to render an SVG image, it shows an empty box instead of the image. I verified that the URL is correct and that the image is publicly accessible. Here's the code snippet I am using: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="https://example.com/image.svg" alt="External SVG" width={500} height={500} /> </div> ); }; export default MyComponent; ``` I've also added the following configuration to `next.config.js`: ```javascript module.exports = { images: { domains: ['example.com'], }, }; ``` Despite this, I see the following behavior in the console: `Failed to decode downloaded font: https://example.com/image.svg`. I have tried loading the SVG directly in an `<img>` tag and it works fine, so the scenario seems to be specific to the Next.js Image component. Is there a known limitation with SVGs and the Next.js Image component that I might be missing? Any guidance or solutions would be greatly appreciated. What's the best practice here? I'm coming from a different tech stack and learning Javascript. Has anyone else encountered this?