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>