diff --git a/web/app/account/account-page/AvatarWithEdit.tsx b/web/app/account/account-page/AvatarWithEdit.tsx
index 88e3a7b34..0408d2ee3 100644
--- a/web/app/account/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/account-page/AvatarWithEdit.tsx
@@ -30,6 +30,8 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
   const [isShowDeleteConfirm, setIsShowDeleteConfirm] = useState(false)
   const [hoverArea, setHoverArea] = useState<string>('left')
 
+  const [onAvatarError, setOnAvatarError] = useState(false)
+
   const handleImageInput: OnImageInput = useCallback(async (isCropped: boolean, fileOrTempUrl: string | File, croppedAreaPixels?: Area, fileName?: string) => {
     setInputImageInfo(
       isCropped
@@ -98,10 +100,15 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
     <>
       <div>
         <div className="group relative">
-          <Avatar {...props} />
+          <Avatar {...props} onError={(x: boolean) => setOnAvatarError(x)} />
           <div
             className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
-            onClick={() => hoverArea === 'right' ? setIsShowDeleteConfirm(true) : setIsShowAvatarPicker(true)}
+            onClick={() => {
+              if (hoverArea === 'right' && !onAvatarError)
+                setIsShowDeleteConfirm(true)
+               else
+                setIsShowAvatarPicker(true)
+            }}
             onMouseMove={(e) => {
               const rect = e.currentTarget.getBoundingClientRect()
               const x = e.clientX - rect.left
@@ -109,12 +116,15 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
               setHoverArea(isRight ? 'right' : 'left')
             }}
           >
-            {hoverArea === 'right' ? <span className="text-xs text-white">
-              <RiDeleteBin5Line />
-            </span> : <span className="text-xs text-white">
-              <RiPencilLine />
-            </span>}
-
+            {hoverArea === 'right' && !onAvatarError ? (
+              <span className="text-xs text-white">
+                <RiDeleteBin5Line />
+              </span>
+            ) : (
+              <span className="text-xs text-white">
+                <RiPencilLine />
+              </span>
+            )}
           </div>
         </div>
       </div>
diff --git a/web/app/components/base/avatar/index.tsx b/web/app/components/base/avatar/index.tsx
index 8c638993f..a6e04a075 100644
--- a/web/app/components/base/avatar/index.tsx
+++ b/web/app/components/base/avatar/index.tsx
@@ -8,6 +8,7 @@ export type AvatarProps = {
   size?: number
   className?: string
   textClassName?: string
+  onError?: (x: boolean) => void
 }
 const Avatar = ({
   name,
@@ -15,6 +16,7 @@ const Avatar = ({
   size = 30,
   className,
   textClassName,
+  onError,
 }: 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` }
@@ -22,6 +24,7 @@ const Avatar = ({
 
   const handleError = () => {
     setImgError(true)
+    onError?.(true)
   }
 
   if (avatar && !imgError) {
@@ -32,6 +35,7 @@ const Avatar = ({
         alt={name}
         src={avatar}
         onError={handleError}
+        onLoad={() => onError?.(false)}
       />
     )
   }