首页 > 其他分享 >antd使用Image加载图片失败后重试

antd使用Image加载图片失败后重试

时间:2024-12-18 16:10:49浏览次数:4  
标签:retry cur Image 重试 antd 图片 id 加载

使用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='图片加载失败'
              one rror={(e) => handleError(e, i.id, i.url)}
          />
      </div>
   })}
</Image.PreviewGroup>

标签:retry,cur,Image,重试,antd,图片,id,加载
From: https://www.cnblogs.com/ZerlinM/p/18615197

相关文章

  • antd-vue的less默认变量
    //Theprefixtouseonallcssclassesfromant.@ant-prefix:ant;//Anoverrideforthehtmlselectorforthemeprefixes@html-selector:html;//--------Colors-----------@primary-color:@blue-6;@info-color:@blue-6;@success-color:@green-6;@pr......
  • Flutter OHOS flutter_native_image
    flutter_native_image原生Flutter图片工具此插件旨在提供原生工具来调整图像大小并通过压缩降低其质量。代码有点粗糙(尤其是iOS部分),但它可以满足我的需求,并且从未崩溃过。如果您愿意,请随意改进它。用法安装在依赖项下的pubspec.yaml中添加以下几行flutter_native_imag......
  • Flutter OHOS flutter_gpu_image(图片视频添加滤镜)
    GPUImageforFlutterFlutter中相机、照片、视频添加各种滤镜效果。本地环境[✓]Flutter(Channelstable,3.0.0,onmacOS12.3.121E258darwin-x64,localezh-Hans-CN)[✓]AndroidtoolchaindevelopforAndroiddevices(AndroidSDKversion33.0.0-rc1)[✓]Xcod......
  • 谷歌发布升级版AI视频生成器Veo 2与图像生成器Imagen 3
      每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领域的领跑者。点击订阅,与未来同行!订阅:https://......
  • 如何使用border-image给边框添加图片
    在CSS中,border-image属性可以用来为HTML元素的边框添加图片。这个属性允许你使用图片作为边框,并且可以自定义图片的切片方式以及边框的宽度。border-image属性是一个简写属性,用于设置以下属性:border-image-source:定义边框图片的路径。border-image-slice:定义边框图片的切......
  • AlexNet: ImageNet Classification with Deep Convolutional Neural Networks
    摘要:在ImageNet竞赛中,主要使用8层(5个卷积层、三个全连接层),其中在第1,2,5层使用最大池化,三个全连接层使用softmax非线性激活。实现图像分类,正是AlexNet网络模型的结构,在传统的神经网络模型中,使用非饱和和高效的CPU来卷积操作,同时也是用“dropout”(正则化)来减少过拟合。1介绍对于......
  • cv2, pil.image, plt.image 读图的差异
    cv2,pil.image,plt.image读图的差异 人是习惯性动物,当我们第一次用opencv时,肯定会觉得opencv的imread()方式很奇怪,做图像出来天天说图像是RGB图RGB图,可opencv读出来的图,却是BGR的顺序。是不是很奇怪,还不止这一点,opencv读进来的图,你在使用shape函数时,返回的是h,w,c,也就是h......
  • 鸿蒙UI系统组件13——图片显示(Image)
    1、概述开发者经常需要在应用中显示一些图片,例如:按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现,Image支持多种图片格式,包括png、jpg、bmp、svg和gif。Image通过调用接口来创建,接口调用形式如下:Image(src:string|Resource|media.PixelMap)......
  • 在使用 Terabyte Image for Windows (TBI) 恢复系统镜像时,相较于 Ghost(诺顿磁盘克隆工
    在使用TerabyteImageforWindows(TBI)恢复系统镜像时,相较于Ghost(诺顿磁盘克隆工具),恢复速度的差异主要受以下几个因素影响:压缩算法与镜像格式:TerabyteImage 使用了更加高效的压缩算法和镜像格式(例如 .tbi 格式),这可以减少数据量,从而提高恢复速度。相比之下,Ghost 在......
  • cv2, pil.image, plt.image 读图的差异
    人是习惯性动物,当我们第一次用opencv时,肯定会觉得opencv的imread()方式很奇怪,做图像出来天天说图像是RGB图RGB图,可opencv读出来的图,却是BGR的顺序。是不是很奇怪,还不止这一点,opencv读进来的图,你在使用shape函数时,返回的是h,w,c,也就是height是第一个维度,然后是宽度,最后是通道数,就......