CODEWITHSUNDEEP
javascriptreactjs
user16213746
user16213746

Reputation:

React: how can I get multiple image size?

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,
            },
          };
        });
      };
    }
  };

Upvotes: 0

Views: 676

Answers (3)

Kabir Hossain
Kabir Hossain

Reputation: 1

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

Upvotes: 0

VMT
VMT

Reputation: 819

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()
}, [])

Upvotes: 0

Georgy
Georgy

Reputation: 1939

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()
  }, [])

Upvotes: 0

Related Questions