img标签图片未加载完成时显示默认图片

在项目中使用img标签加载图片资源，当图片文件过大时，加载慢会出现图片裂了的情况，通过onload事件解决

1
import { FC, useState } from 'react';
2
import loadImage from './default.png';
3

4
type IProps = {
5
  props: { [props: string]: number | string };
6
  data: { [props: string]: string };
7
};
8
const Img: FC<IProps> = ({ props, data }) => {
9
  const { src } = data;
10

11
  const [imgSrc, setImgSrc] = useState(loadImage);
12
  const handleLoad = () => {
13
    const imgDom = new Image();
14
    imgDom.src = src;
15
    // 加载完成后显示
16
    imgDom.onload = () => setImgSrc(src);
17
  }
18
  return <img onLoad={handleLoad} style={{...props}} src={imgSrc} alt='' />;
19
};
20

21
export default Img;

封装成组件

1
import { FC, useState } from 'react';
2
import loadImage from './default.png';
3

4
type IProps = {
5
  props: { [props: string]: number | string };
6
  loadImage: string
7
  successImage: string
8
  errorImage: string
9
};
10
const Img: FC<IProps> = ({ props, loadImage, successImage, errorImage }) => {
11
  const [imgSrc, setImgSrc] = useState(loadImage);
12
  const handleLoad = () => {
13
    const imgDom = new Image();
14
    imgDom.src = successImage;
15
    // 加载完成后显示
16
    imgDom.onload = () => setImgSrc(successImage);
17
    imgDom.onError = () => setImgSrc(errorImage);
18
  }
19
  return <img onLoad={handleLoad} style={{...props}} src={imgSrc} alt='' />;
20
};
21

22
export default Img;