Displaying image is slow in React Modal

Viewed 31

I have a React modal in which I want to display images. The images are stored in my public folder, so every modal retrieves their image url like this :

const path = `/tooltipImages/${imageName}.webp`;

However, when my modal opens, images are not directly displayed and take their time. I tried adding a component and doing this :

    <img
      src={`${path}?w=0.4&h=auto&fit=crop&auto=compress`}
      srcSet={`${path}?w=0.4&h=auto&fit=crop&auto=compress`}
      alt={t(`label.${name}`)}
      loading="eager"
      onLoad={() => setLoading(false)}
      decoding="sync"
    />

but nothing seems to improve performance. Any advice ?

0 Answers
Related