Image does not load src when switchin from empty src to URL

[dominik-petschenka-syzygy]

Describe the bug

Image element does not load the src when switching from empty src to an URL.

We have a list with multiple MediaCard components, each displaying an Image.

The Image src should only load when the MediaCard (or Image, whichever is easier) enters the viewport.

I could not set the ref on Image, so I set it on MediaCard or in this simple example on Boxed

To Reproduce

For example one item looks like this, and we render 20 of those in a list.

const MediaItem = () => {
  const ref = useRef<HTMLDivElement>(null);
  const isInViewport = useIsInViewport(ref, false);
  const imageUrl = 'https://via.placeholder.com/400x200';

    return (
      <Boxed ref={ref}>
        <Image aspectRatio="16:9" src={isInViewport ? imageUrl : ''} />
      </Boxed>
    );
}

Expected behavior

The Image should load when the element enters the viewport.

isInViewport switches correctly to true, but, when changing the src from empty string to the real url, the Image still shows the placeholder and never loads the src.

Desktop

• OS: Windows
• Browser Chrome
• Version 120

Additional context

We want to load images in MediaCard's only when they are in the viewport. Is there a different way?

Maybe the Image or MediaCard component could be extended, to provide this function internally?

[dominik-petschenka-syzygy]

As an alternative: Can the Image component be extended to support loading="lazy"?

https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading

[dominik-petschenka-syzygy]

I found a workaround: We can add 2 Image components - one for the empty URL and one for the filled URL. The two Image components need different key props, so when switching between them, they get updated correctly and the image loads.

It would still be great if Mistica provided a lazy load functionality out of the box. 😎