antd使用Image加载图片失败后重试
使用antd Image加载多张图片时,遇到网络之类的问题,导致图片加载失败,希望能重试3次,之后再展示默认图片
代码如下:
const retry = {}
const handleError = (e, id, url) => {
let cur = retry[id]
retry[id] = cur ? ++cur : 1;
if (retry[id] >= 3) {
console.log('加载失败')
e.target.src = '默认图片.JPG'
} else {
e.target.src = url
}
}
<Image.PreviewGroup>
{(list || []).map((i, index) => {
return <div key={index} style={{ padding: '0 6px', width: '100%', height: '100%' }}>
<Image
width={'100%'}
height={'100%'}
src={i.url}
alt='图片加载失败'
onError={(e) => handleError(e, i.id, i.url)}
/>
</div>
})}
</Image.PreviewGroup>
THE END
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律