Next.js Image Component scenarios to Lazy Load While Using Custom Loader Function
After trying multiple solutions online, I still can't figure this out. Quick question that's been bugging me - I'm currently using the Next.js Image component (version 13.0.0) and implemented a custom loader function to serve images from an external CDN... However, I noticed that my images are not lazy loading as they should, which is affecting the performance of my pages. The `loading='lazy'` attribute is included, but the images are being loaded immediately upon rendering instead of when they enter the viewport. Here’s my custom loader function: ```javascript const myLoader = ({ src, width, quality }) => { return `https://example.com/${src}?w=${width}&q=${quality || 75}`; }; ``` And here’s how I’m using the Image component: ```javascript <Image loader={myLoader} src="image.jpg" alt="A descriptive text" width={500} height={300} loading="lazy" /> ``` I verified that the `loading` attribute is set to 'lazy', yet all of my images are being fetched right away as soon as the component mounts. I’ve tried removing the custom loader to see if that resolves the scenario, but even with the default loader, the behavior remains the same. The browser's developer tools clearly indicate that the images are being loaded immediately, and I can see them in the network tab. Is there something specific I’m missing in my implementation or a configuration that could be causing this scenario? Any insights would be appreciated! Any ideas how to fix this? I'm working in a macOS environment. Has anyone dealt with something similar? For context: I'm using Javascript on Linux.