实现效果
完整代码
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);
}
const onLoad = (url: string) => {
setError(false);
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>
)
})
}