自定义react组件:Img,图片获取失败时能显示指定的默认图片

前端之家收集整理的这篇文章主要介绍了自定义react组件:Img,图片获取失败时能显示指定的默认图片前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

自定义react组件,Img,图片获取失败时能显示指定的默认图片

import React from 'react';
import ReactDOM from 'react-dom';
/**
 * 图片加载失败就显示默认图片
 */
class Img extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            imageUrl: this.props.imageUrl
        };
    }

    handleImageLoaded() {
     
    }

    handleImageErrored() {
        this.setState({ 
            imageUrl: this.props.defaultImg
        });
    }

    render() {
        return (
            <img style={this.props.style}
                src={this.state.imageUrl}
                onLoad={this.handleImageLoaded.bind(this)}
                onError={this.handleImageErrored.bind(this)}
            />
        );
    }
}
export default Img;

猜你在找的React相关文章