Question

我正在尝试使用<img>函数遍历循环并将图像URL列表映射到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
})

在地图功能中获取图像尺寸？

2 个答案: