获取React中图片的精确宽度和高度

Question

我是react的新手。我有一个由file-loader插件加载的图像数组，我这样映射它们：

images.map((img, index) => <img src={img}>

如何获取每个图像的宽度和高度属性？我知道如何设置这些属性，但是我不知道图像的高度和宽度，因为它们被存储在数组中。

- Vahid

---

高度和宽度基于什么？比如页面的样式表中有img { height: 40px; }，这会影响该值吗？还是指实际图像在100%缩放下的大小？并且是为了在“render”函数内部使用还是稍后使用？ - loganfsmyth

@loganfsmyth 是的，我需要实际图片尺寸，并且我想在渲染函数中使用它们。 - Vahid

Answer 1

您可以尝试使用类似于image-size-loader这样的工具。file-loader并不能提供您需要的功能。

- loganfsmyth

---

这正是我一直在寻找的。它能够提供设置outputPath和其他file-loader选项的功能吗？ - Vahid

我还发现了image-size，它只是用于获取图像的大小。 - Vahid

你需要查看文档以获取选项，我不知道。加载程序在内部使用 image-size。 - loganfsmyth

Answer 2

您可以使用onLoad属性获取数据。

class ImgLoader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
    };
  }

  onImgLoad = ({ target: img }) => {
    this.setState({
      width: img.width,
      height: img.height,
    });
  };

  onImgError = e => {
    e.target.src = '/path/no-picture.jpg';
    this.setState({
      error: true,
    });
  };

  render() {
    const { image, alt } = this.props;
    const { width, height, error } = this.state;
    console.log(width, height, error);
    return <img onLoad={this.onImgLoad} src={image} alt={alt} onError={this.onImgError} />;
  }
}

- Mikdat DOĞRU

Answer 3

有很多方法，而在前端世界中仍然存在哪些方法最好的争议。以下是两种简单的方法，可帮助您入门。

内联样式

<img style={{width: '50px', height: '50px'}} src={img} />

简单的CSS

import './MyCSSFileName'

<img className="fixed_img" src={img} />

// in your .css file
.fixed_img {
  width: 50px;
  height: 50px;
}

- Christopher Messer

---

实际上我的问题是如何获取宽度和高度。 - Vahid