Next.js Image Component scenarios to Load SVGs with Dynamic Imports
I'm stuck on something that should probably be simple... I'm working on a Next.js application (v12.1.0) and I encountered an scenario with the `<Image />` component not rendering SVGs when I dynamically import them. I have an SVG file located in the `public/images` directory and I'm trying to load it conditionally based on user interaction. However, when the SVG is dynamically imported, it results in a blank space instead of displaying the image. For reference, here's the code I have in my component: ```javascript import dynamic from 'next/dynamic'; const DynamicImage = dynamic(() => import('../public/images/myImage.svg')); const MyComponent = () => { const [showImage, setShowImage] = useState(false); return ( <div> <button onClick={() => setShowImage(true)}>Load Image</button> {showImage && <DynamicImage width={500} height={300} alt='My SVG' />} </div> ); }; export default MyComponent; ``` When I click the button, the SVG does not render, and there are no console errors or warnings. Instead, I just see an empty box where the image should be. I've tried importing the SVG using both the built-in `Image` component and as a regular `<img>` tag, but neither method works when I use dynamic imports. Is there a specific way to handle SVG imports in Next.js that I'm missing? Any insights on how to resolve this would be greatly appreciated! My development environment is Linux. What's the best practice here?