diff --git a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
index 5890c2ea92..f3dbc9421c 100644
--- a/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
+++ b/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx
@@ -43,9 +43,9 @@ const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
   const handleSaveAvatar = useCallback(async (uploadedFileId: string) => {
     try {
       await updateUserProfile({ url: 'account/avatar', body: { avatar: uploadedFileId } })
-      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
       setIsShowAvatarPicker(false)
       onSave?.()
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
     }
     catch (e) {
       notify({ type: 'error', message: (e as Error).message })
diff --git a/web/app/components/base/avatar/index.tsx b/web/app/components/base/avatar/index.tsx
index a6e04a0755..89019a19b0 100644
--- a/web/app/components/base/avatar/index.tsx
+++ b/web/app/components/base/avatar/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import cn from '@/utils/classnames'
 
 export type AvatarProps = {
@@ -27,6 +27,12 @@ const Avatar = ({
     onError?.(true)
   }
 
+  // after uploaded, api would first return error imgs url: '.../files//file-preview/...'. Then return the right url, Which caused not show the avatar
+  useEffect(() => {
+    if(avatar && imgError)
+      setImgError(false)
+  }, [avatar])
+
   if (avatar && !imgError) {
     return (
       <img