您的位置:首页 > Web前端 > React

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

2017-07-14 17:56 2707 查看
自定义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;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ReactJS