html img src 图片路径不存在或者存在但是路径无效无法正常加载出来的情况，动态替换成有效的默认图片，解决办法。
通常的判断为：
但如果当src路径存在，但路径无效导致无法正常加载时，可以利用img 的 onerror 事件来解决：
分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif，图片不存在将显示 noPic.gif。但问题来了，如果 noPic.gif 也不存在，则继续触发 onerror，导致循环，故出现错误。
说明：如果图片存在，但网络很不通畅，也可能触发 onerror。
解决：可以在设置为默认图片之后将 onerror 事件置空，避免死循环触发。
function imgerror(img){
img.src="images/default.jpg";
img.οnerrοr=null; //控制不要一直跳动
}
// 封装一个组件来解决 import React, { useEffect, useState } from 'react';
interface IProps { imgUrl: string; }
const CheckImgExists = (props: IProps) => { const { imgUrl } = props;
const [imageSrc, setImageSrc] = useState(‘http%3A%2F%2Fstatic.runoob.com%2Fimages%2Fdemo%2Fdemo2.jpg’);
useEffect(() => { checkImgExists(imgUrl) .then(() => { setImageSrc(imgUrl); }) .catch(() => { // 如果 props.src 有多次变更。 有成功也有失败的，默认图片就被覆盖了 setImageSrc(‘http%3A%2F%2Fstatic.runoob.com%2Fimages%2Fdemo%2Fdemo2.jpg’); }); }, [imgUrl]);
// 判断图片是否合法，合法则显示正确的图片，不合法显示默认图片 const checkImgExists = imgUrl => { return new Promise((resolve, reject) => { const imgObj = new Image(); imgObj.src = imgUrl; imgObj.onload = res => { resolve(res); }; imgObj.onerror = err => { reject(err); }; }); };
return <img style={{ width: 200, height: 118 }} src={imageSrc} />; }; export default CheckImgExists;
