Next.js Image Component Overwrites Alt Attributes When Using Dynamic Imports
Hey everyone, I'm running into an issue that's driving me crazy. I'm relatively new to this, so bear with me. I'm stuck on something that should probably be simple. I've searched everywhere and can't find a clear answer. I'm working with an scenario with the Next.js Image component where the alt attributes are being overwritten when I use dynamic imports for my images. I'm using Next.js version 12.1.0 and I've implemented dynamic imports for various image assets based on user interactions to optimize loading performance. Here’s a simplified version of my code: ```javascript import dynamic from 'next/dynamic'; const DynamicImage = dynamic(() => import('./path/to/myImage.png')); const MyComponent = () => { return ( <div> <Image src={DynamicImage} alt="Dynamic Image" width={500} height={300} /> </div> ); }; export default MyComponent; ``` The `alt` attribute is being ignored entirely in the rendered output. Instead of showing "Dynamic Image", the alt tag appears empty in the HTML source, which is a question for accessibility and SEO. I’ve tried changing the import method to a static import, and that seems to work fine with the alt attributes displaying correctly. However, I want to leverage the benefits of dynamic imports for performance. I've also checked the console for any warnings or errors, but nothing stands out except for the following warning when the image doesn’t load: ``` Warning: The `src` prop for `Image` has to be a string or an object with `src`, `width`, and `height`. ``` Could there be a specific reason why the alt text is lost when using dynamic imports? Is there a better way to handle this situation while still using dynamic imports, or am I missing something in the implementation? Any insights would be greatly appreciated! For context: I'm using Javascript on macOS. Has anyone else encountered this? I'm working on a service that needs to handle this. What's the best practice here? I recently upgraded to Javascript LTS. What's the best practice here?