React 图片获取失败时能显示指定的默认图片 ​

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;

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;