Next.js Image Component Is Not Lazy Loading Properly When Using Dynamic Routes
I recently switched to I've looked through the documentation and I'm still confused about I'm experiencing an scenario with the Next.js Image component where images are not lazy loading as expected when navigating through dynamic routes. I set the `loading` attribute to `lazy`, but the images still seem to load immediately as I navigate between pages. I'm using Next.js version 13.1.0 and I have the following code in my dynamic page component: ```javascript import Image from 'next/image'; const DynamicPage = ({ imageSrc }) => { return ( <div> <h1>Dynamic Image Loading</h1> <Image src={imageSrc} alt="Dynamic Image" layout="responsive" width={700} height={500} loading="lazy" /> </div> ); }; export default DynamicPage; ``` I made sure that my images are placed in the `public` directory, and I'm passing the correct `imageSrc` prop to the component based on the route. When I check the network tab in the developer tools, I see the image files being requested right away instead of being deferred until they are in the viewport. I also tried wrapping the `Image` component with a `div` that has a `style={{ minHeight: '100vh' }}` to ensure it takes up space, but that didn't help either. Are there any known issues with the Image component's lazy loading feature in dynamic routes, or is there something I'm missing in my implementation? Any insights would be greatly appreciated! My development environment is macOS. Is there a better approach? Any ideas what could be causing this? Could this be a known issue?