react封装图片显示组件，路径错误显示默认图片

在开发中，经常遇到图片加载失败的情况，如果图片加载失败，显示一个错误标志会严重影响用户体验度。如果在判断图片加载失败后显示默认图片就解决这个问题。
img 标签有src属性，用来给定图片的地址，还有一个onError属性表示图片加载失败触发的事件属性，有了这个属性就很好做图片加载失败的处理了。

<img src="" onError="" />

一、使用hook方式封装组件

import React, {useState, useEffect} from 'react';

/**
 * 图片加载失败就显示默认图片
 * 使用hook方式
 * @param {*} src  图片路径
 * @param {*} style  图片样式
 * @param {*} defaultImg  默认显示的图片路径
 */
const MyImg = ({src, style, defaultImg}) => {
    const [imgSrc, handleImageErrored] = useState(src);
    // useEffect(() => {
        // 组件更新
    // });
    return (
        <img style={style}
            src={imgSrc}
            onError={() => handleImageErrored(defaultImg)}
        />
    );
}
export default MyImg;

二、react普通封装组件的方法：

import React from 'react';
/**
 * 图片加载失败就显示默认图片
 */
class MyImg extends React.Component {
   constructor(props){
        super(props);
        this.state = {
            src: props.src
        }
    }
    // 父组件更新后，子组件更新，这里可以优化
    componentWillReceiveProps(nextprops) {
        this.setState({src: nextprops.src});
    }

    // 图片加载失败，将默认值赋值给src
    handleImageErrored() {
        const { defaultImg } = this.props;
        this.setState({
            src: defaultImg
        });
    }

    render() {
        return (
            <img style={this.props.style}
                 src={this.state.src}
                 onError={this.handleImageErrored}
            />
        );
    }
}
export default MyImg;

三、使用方式：

import MyImg from '@/component/MyImg';
...
<MyImg 
  src={`${BASE_URL}${photoPath}`} 
  defaultImg={require('...')}
/>
...