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 = `/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"><imgstyle={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"><Imagesrc={v}alt={""}style={{height: 200, width: 400, marginLeft: 20 }}/></div>)})}