自定义 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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33