img加载中显示loading，加载失败显示默认图片（React）

实现效果

完整代码

import { useRef, useState } from 'react';
import './index.less';
import errorImg from '@/components/Image/img/404.png';

export default function Img(props) {
  const {
    style = {},
    src = "",
    alt = "",
    errImg = errorImg,
    loadingImg = `https://img1.baidu.com/it/u=2097753014,2835891615&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281`
  } = props;
  const imgRef = useRef<HTMLDivElement>(null);
  const [error, setError] = useState(false);
  const [neededSrc, setNeededSrc] = useState(loadingImg || src);
  const [random, setRandom] = useState<number>();

  // 加载失败
  const onError = (obj: any) => {
    setNeededSrc(errorImg);
  }

  // img加载
  const onLoad = (url: string) => {
    setError(false);
    // 创建一个img标签
    const imgDom = new Image();
    imgDom.src = url;
    imgDom.onload = function () {
      console.log('onload--');
      setNeededSrc(url);
    }
    imgDom.onerror = () => {
      onError({});
    };
  }

  // 加载成功返回渲染
  return (
    <div ref={imgRef} className="img">
      <img
        style={style}
        src={neededSrc}
        alt={alt}
        onLoad={() => onLoad(props?.src)}
        onError={() => onError({ url: errImg })}
      />
    </div>
  )
}

.img {
  img {
    border: 1px #888 solid;
  }
}

import Image from '@/components/Image';

{
  list?.map(v => {
    return (
      <div key={v} className="note-book_img">
        <Image
          src={v}
          alt={""}
          style={{ height: 200, width: 400, marginLeft: 20 }}
        />
      </div>
    )
  })
}