Получить размеры изображения в функции карты?

Question

Я пытаюсь перебрать и сопоставить список URL-адресов изображений с тегами <img> в React с использованием функции .map(), но я бы хотел классифицировать каждое изображение на основе того, является ли оно вертикальным или горизонтальным.Вот код, который у меня есть:

const images = ['path/to/image1.jpg', 'path/to/image2.jpg']
const imageList = images.map((imageSrc) => {
  const image = new Image()
  image.src = imageSrc
  let ratio = 1
  image.onload = () => {
    ratio = image.width / image.height
  }
  return <img src={imageSrc} className={ratio > 1 ? 'img_horiz' : 'img_vert'} />
})

Когда страница отображается, однако, imageList пусто.Есть ли способ ретроактивно добавлять вертикальные / горизонтальные классы к каждому изображению?Или есть способ добиться этого с помощью функции .map()?Заранее спасибо!

Answer 1

Вы можете зависеть от функции onLoad, а затем изменять className на ее основе.Проверьте следующий код: в компонент вы можете добавить следующую функцию

onImgLoad = ({ target: img }) => {
        let ratio = img.offsetWidth / img.offsetHeight;
        img.className = ratio > 1 ? "img_horiz" : "img_vert";
      };

---------- позволить функции обрабатывать событие onLoad следующим образом

const images = ['path/to/image1.jpg', 'path/to/image2.jpg']
    const imageList = images.map((imageSrc) => {
      return <img src={imageSrc} onLoad={this.onImgLoad} />
    })

Answer 2

Вы создаете new Image(), а затем никогда не возвращаете его.Я думаю, что вы хотите сделать что-то вроде этого:

const images = ['path/to/image1.jpg', 'path/to/image2.jpg']
const imageList = images.map((imageSrc) => {
  const image = new Image()
  image.src = imageSrc
  image.ratio = 1
  image.className = 'img_vert'
  image.onload = () => {
    image.ratio = image.width / image.height
    image.className = ratio > 1 ? 'img_horiz' : 'img_vert'
  }

  return image
})