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>
posted @ 2024-12-18 16:05  ZerlinM  阅读(8)  评论(0编辑  收藏  举报