小编Ser*_*nas的帖子

如何检测何时加载图像,通过道具提供,并在React中更改状态?

我想在加载最终头像时加载不同的图像(假化身).想法是检测何时加载道具图像并改变状态.可能吗?一些想法?谢谢!

class ImageUser extends React.Component {

constructor(props) {
    super(props);
    this.state = {userImageLoaded: false};
    let imageSrc = "";

    if (!this.props.userImage) {
        imageSrc = this.props.noUserImage;
    } else {
        imageSrc = this.props.userImage;
    }

    this.loadingImage = <img className={styles.imageUser}
                     src={this.props.loadingImage} alt="2"/>;

    this.userImage =
        <img onLoad={this.setState({userImageLoaded: true})}
             className={styles.imageUser} src={imageSrc}
             alt="1"/>;

}

render() {
    let image = "";
    if (this.state.userImageLoaded) {
        image = this.userImage;
    } else {
        image = this.loadingImage;
    }
    return (
        <div>
            {image}
        </div>
    );
}
}

export default ImageUser;
Run Code Online (Sandbox Code Playgroud)

javascript state image loading reactjs

13
推荐指数
3
解决办法
9802
查看次数

标签 统计

image ×1

javascript ×1

loading ×1

reactjs ×1

state ×1