自定义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;