From 562a571281debebcd524a2ec187bfd98b43e594d Mon Sep 17 00:00:00 2001
From: leo <38089200+CoolBoyLeo@users.noreply.github.com>
Date: Thu, 14 Sep 2023 13:31:35 +0800
Subject: [PATCH] fix: Improved fallback solution for avatar image loading
 failure (#1172)

---
 web/app/components/base/avatar/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/web/app/components/base/avatar/index.tsx b/web/app/components/base/avatar/index.tsx
index e6ebf308bd..c3410d0bc8 100644
--- a/web/app/components/base/avatar/index.tsx
+++ b/web/app/components/base/avatar/index.tsx
@@ -1,5 +1,6 @@
 'use client'
 import cn from 'classnames'
+import { useState } from 'react'
 
 type AvatarProps = {
   name: string
@@ -17,14 +18,20 @@ const Avatar = ({
 }: AvatarProps) => {
   const avatarClassName = 'shrink-0 flex items-center rounded-full bg-primary-600'
   const style = { width: `${size}px`, height: `${size}px`, fontSize: `${size}px`, lineHeight: `${size}px` }
+  const [imgError, setImgError] = useState(false)
 
-  if (avatar) {
+  const handleError = () => {
+    setImgError(true)
+  }
+
+  if (avatar && !imgError) {
     return (
       <img
         className={cn(avatarClassName, className)}
         style={style}
         alt={name}
         src={avatar}
+        onError={handleError}
       />
     )
   }