Next.js Image Component scenarios to Load SVGs with External URLs on Static Generation
I tried several approaches but none seem to work. I've been trying to use the Next.js Image component to load external SVG images in my project, but I'm running into issues during static generation. When I use the Image component for SVGs from an external URL, it either doesn't render at all or throws a warning in the console: `Warning: Invalid src prop for <Image>`. Here's the code snippet I'm working with: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="https://example.com/image.svg" alt="Example SVG" width={500} height={500} /> </div> ); }; export default MyComponent; ``` I've double-checked that the URL is correct and accessible, as I can view the SVG directly in the browser. I also tried setting the `unoptimized` prop to `true`, but it still doesn’t resolve the scenario. The Next.js version I'm using is 12.3.1. I understand that Next.js handles images differently than regular HTML `img` tags, but I'm not sure what I'm missing here. Any insights on how to properly render SVGs from external sources using the Image component would be greatly appreciated! For context: I'm using Javascript on Ubuntu. This is happening in both development and production on macOS. What would be the recommended way to handle this?