如何优雅的避免cloudinary云图片加载失败?

前言

我在使用cloudinary(一个云图像/视频平台)的时候发现一个潜在问题:有时候获取图片地址的时候初次获取是无法正确获取到的,必须刷新一次或多次才能正确获取到图片,但是浏览器只会加载一次图片,这就会导致图片即使存在也无法正确加载从而被备用图片替换。

补充一下我使用cloudinary的方式:通过cloudinary提供的上传组件实现图片上传,在图片上传的同时记录下当前上传图片的云地址并存储到数据库,每次使用云图片的时候只需要调用这个地址。

正文

下面是个简单的例子,主要关注src部分,user?.image就是数据库中存储的云图片地址,当我们没有拿到的时候就用"/images/person.jpg"替换。

typescript 复制代码
<img
    ref={imageRef}
    src={user?.image || "/images/person.jpg"}
    alt="image"
    className="w-8 h-8 rounded-full mt-[2px]"
/>

那么如何解决前言中的问题呢?

typescript 复制代码
const imageRef = useRef<HTMLImageElement | null>(null);

const handleImageError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
  const imgElement = event.currentTarget;
  imgElement.src = user?.image;
};

return (
  <img
    ref={imageRef}
    src={user?.image || "/images/person.jpg"}
    alt="image"
    className="w-8 h-8 rounded-full mt-[2px]"
    onError={handleImageError}
  />
);

这段代码中我们给onError绑定了handleImageError事件,作用就是当user?.image图片获取错误时都会触发onError事件从而多次加载图片,这样我们就可以避免初次加载无法拿到图片的情况。

这样就结束了吗?当然没有,当user?.image一直无法正确获取就会造成无限循环,所以我们要在其基础上进行循环处理:

typescript 复制代码
const imageRef = useRef<HTMLImageElement | null>(null);
const timerRef = useRef<NodeJS.Timeout | null>(null);  // 用于存储定时器

const handleImageError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {
  const imgElement = event.currentTarget;
  
  // 如果定时器已存在,说明在2s等待时间内
  if (timerRef.current) {
    // 继续尝试原来的操作
    imgElement.src = user?.image;
    return;
  }

  // 设置2s定时器
  timerRef.current = setTimeout(() => {
    // 2s后直接使用备用地址
    if (imgElement) {
      imgElement.src = "/images/person.jpg";
    }
    // 清除定时器引用
    timerRef.current = null;
  }, 2000);

  // 首次错误时也执行原操作
  imgElement.src = user?.image;
};

// 组件卸载时清理定时器
useEffect(() => {
  return () => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }
  };
}, []);

return (
  <img
    ref={imageRef}
    src={user?.image || "/images/person.jpg"}
    alt="image"
    className="w-8 h-8 rounded-full mt-[2px]"
    onError={handleImageError}
  />
);

通过添加定时器,我们可以设定强制赋值备用图片地址的时间,在这里我设置的是2s可以根据各自情况修改。这样设置后,会给模板图片2s的加载时间,2s后打断。

相关推荐
键盘不能没有CV键3 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ3 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python4 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep5 小时前
【前端】前端运行环境的结构
前端
你的人类朋友5 小时前
【Node】认识multer库
前端·javascript·后端
Aitter5 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front5 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'6 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'6 小时前
css `dorp-shadow`
前端·css
流***陌6 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序