Question

我有新的反应。我有一个由file-loader插件加载的图像数组。我把它们映射成这样：

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

如何获取每张图片的宽度和高度属性？我知道如何设置属性，但我不知道图像的高度和宽度，因为它们在数组中。

Answer 1

您可以使用image-size-loader之类的东西进行探索。 file-loader不提供您正在寻找的行为。

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} />;
  }
}

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

获得准确的图像宽度和高度

3 个答案: