Next.js Image Component Not Lazy Loading Images from External URLs
I'm working on a personal project and I'm working on a personal project and I've been struggling with this for a few days now and could really use some help... I'm using Next.js version 12.2.0 and I've implemented the Image component to display images from an external API. However, I noticed that the images are not lazy loading as expected. Instead, they load immediately when the page is rendered, which defeats the purpose of optimizing performance with lazy loading. I have enabled lazy loading by default, but it seems to be bypassed for external URLs. Here's the code I'm using: ```jsx import Image from 'next/image'; const MyGallery = () => { const imageUrl = 'https://example.com/image.jpg'; return ( <div> <h1>My Gallery</h1> <Image src={imageUrl} alt="Example Image" width={500} height={300} loading="lazy" /> </div> ); }; export default MyGallery; ``` I double-checked that the `loading="lazy"` attribute is set correctly, but the images still appear to load immediately when the component mounts. I also inspected the network requests and found that the images are fetched right away instead of waiting until they enter the viewport. Has anyone faced a similar scenario with the Next.js Image component? Is there a specific configuration or a workaround required for lazy loading images from external URLs? Any insights or suggestions would be greatly appreciated! My development environment is macOS. For context: I'm using Javascript on Ubuntu. Any help would be greatly appreciated! The stack includes Javascript and several other technologies. What are your experiences with this?