React: how can I get multiple image size?

Question

I have an object with links

const urls = {
  small: https://image1.com,
  medium: https://image2.com,
  large: https://image3.com,
};

output should look like that:

{
  small: {width: image_width, height: image_height},
  medium: {width: image_width, height: image_height},
  large: {width: image_width, height: image_height}
}

I tried like this, but it turns out an infinite loop. Help me fix my function or show how it is possible in another way

const [imageSize, setImageSize] = useState({});

  const getImageSize = () => {
    for (const url in urls) {
      const img = new Image();
      img.src = urls[url];
      img.onload = () => {
        setImageSize((prev) => {
          return {
            ...prev,
            [url]: {
              width: img.width,
              height: img.height,
            },
          };
        });
      };
    }
  };

Answer 1

To trigger image onload listener it should be mounted to the DOM, otherwise your setImageSize not called. To do this you should have valid images and attach it somewhere to the html, like this:

  const urls = {
    small: 'https://dummyimage.com/600x400/000/fff',
    medium: 'https://dummyimage.com/600x400/000/fff',
    large: 'https://dummyimage.com/600x400/000/fff',
  }
  
  const getImageSize = () => {
    for (const url in urls) {
      const img = new Image()
      img.src = urls[url]
      img.onload = () => {
        setImageSize(prev => {
          return {
            ...prev,
            [url]: {
              width: img.width,
              height: img.height,
            },
          }
        })
      }
      document.body.appendChild(img)
    }
  }

  useEffect(() => {
    getImageSize()
  }, [])

Answer 2

Try this below code:

const [imageSize, setImageSize] = useState({});

const urls = {
  small: https://image1.com,
  medium: https://image2.com,
  large: https://image3.com,
}; 

const getImageSize = () => {
 for (const size in urls) {
    var img = new Image();
    img.onload = function() {
      setImageSize((prev) => {
       return {
        ...prev,
        [size]: {width: this.width, height: this.height}
      }
     })
    };
   img.src = url;
  }
}

useEffect(() => {
 getImageSize()
}, [])

Answer 3

check the fiddle link I hope it will work[https://jsfiddle.net/k7bue0ho/][1]