4. 图片组件 - 异常处理

import React, { useState } from 'react';
import PropTypes from 'prop-types';
const Img = (props) => {
    const { defaultImg, alt, src, className } = props;
    const [currentSrc, setCurrentSrc] = useState(defaultImg);
    /**
  * 图片加载完成
    */
    const handleOnLoad = () => {
      // 创建一个img标签
      const imgDom = new Image();
      imgDom.src = props.src;
      // 图片加载使用正常的图片
      imgDom.onload = () => {
        setCurrentSrc(src);
    }
      // 图片加载失败使用图片占位符
      imgDom.onerror = () => {
        setCurrentSrc(defaultImg);
    };
  };
    return (
      <img
        className={className}
        alt={alt}
        src={currentSrc}
      onLoad={handleOnLoad()}
        />
  );
};
Img.propTypes = {
    defaultImg: PropTypes.string,
    className: PropTypes.string,
    alt: PropTypes.string,
    src: PropTypes.string,
};
Img.defaultProps = {
    alt: '图片',
  className: '',
  alt: '',
  src: '',
};