Lazy loading isn't working although lazy attribute is true

Bug Report

Describe the Bug

A clear and concise description of what the bug is.

How to Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

const fields: JSX.Element[] = []; for (let i = 1; i <= 800; i++) { fields.push( <AspectRatio ratio=“1” style={{ maxWidth: “200px” }}> {/source = {content.moodImage?.previews.s}/} <Img key={i} src={https://source.unsplash.com/random/?image=${i}} style={{ backgroundColor: “grey”, width: “480”, height: “320” }} alt=“REACT COOL IMG” cache lazy debounce={1000} /> </AspectRatio> ); }

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export function TestPageImages(): JSX.Element { return ( <> <AspectRatio ratio=“1/5” style={{ maxWidth: “400px” }}> <img key={“key”} src={“https://source.unsplash.com/random”} alt=“REACT COOL IMG” /> </AspectRatio> <div className="mb-20 flex flex-wrap pl-5">{fields}</div> </> ); }

Expected Behavior

It should load lazy the images while scrolling, but it loads every single image at the beginning.

Screenshots

Your Environment

• Device: MacBook Pro
• OS: macOS
• Browser: Chrome

[christineschuller]

It works now. Thanks a lot 😃 I probably had a bug in my code or something… it works fine now with your code snippet. Thank you once again!

[wellyshen]

I’d recommend to turn the cache feature on because when images are cached by browser we don’t need to lazily loading them again. So, the user can see the content quickly.