diff --git a/frontend/src/components/common/account.js b/frontend/src/components/common/account.js
index efaa3db75d..3cbb442a53 100644
--- a/frontend/src/components/common/account.js
+++ b/frontend/src/components/common/account.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import { Utils } from '../../utils/utils';
-import editorUtilities from '../../utils/editor-utilties';
-import { siteRoot, gettext } from '../../utils/constants';
+import { seafileAPI } from '../../utils/seafile-api';
+import { siteRoot, gettext, appAvatarURL } from '../../utils/constants';
 
 const propTypes = {
   isAdminPanel: PropTypes.bool,
@@ -21,12 +21,8 @@ class Account extends Component {
       isStaff: false,
       isOrgStaff: false,
       usageRate: '',
-      avatarURL: '',
     };
-  }
-
-  componentDidMount(){
-    this.getAccountInfo();
+    this.isFirstMounted = true;
   }
 
   componentDidUpdate(prevProps) {
@@ -71,24 +67,23 @@ class Account extends Component {
   }
 
   onClickAccount = () => {
-    this.setState({
-      showInfo: !this.state.showInfo,
-    });
-  }
-
-  getAccountInfo = () => {
-    editorUtilities.getAccountInfo().then(resp => {
-      this.setState({
-        userName: resp.data.name,
-        contactEmail: resp.data.email,
-        usageRate: resp.data.space_usage,
-        quotaUsage: Utils.bytesToSize(resp.data.usage),
-        quotaTotal: Utils.bytesToSize(resp.data.total),
-        isStaff: resp.data.is_staff,
-        isOrgStaff: resp.data.is_org_staff === 1 ? true : false,
-        avatarURL: resp.data.avatar_url
+    if (this.isFirstMounted) {
+      seafileAPI.getAccountInfo().then(resp => {
+        this.setState({
+          userName: resp.data.name,
+          contactEmail: resp.data.email,
+          usageRate: resp.data.space_usage,
+          quotaUsage: Utils.bytesToSize(resp.data.usage),
+          quotaTotal: Utils.bytesToSize(resp.data.total),
+          isStaff: resp.data.is_staff,
+          isOrgStaff: resp.data.is_org_staff === 1 ? true : false,
+          showInfo: !this.state.showInfo,
+        });
       });
-    });
+      this.isFirstMounted = false;
+    } else {
+      this.setState({showInfo: !this.state.showInfo});
+    }
   }
 
   renderMenu = () => {
@@ -118,21 +113,14 @@ class Account extends Component {
   }
 
   renderAvatar = () => {
-    if (this.state.avatarURL) {
-      return (
-        <img src={this.state.avatarURL} width="36" height="36" className="avatar" alt={gettext('Avatar')} />
-      );
-    }
-    return (
-      <img src="" width="36" height="36" className="avatar" alt={gettext('Avatar')} />
-    );
+    return (<img src={appAvatarURL} width="36" height="36" className="avatar" alt={gettext('Avatar')} />);
   }
 
   render() {
     return (
       <div id="account">
         <a id="my-info" onClick={this.onClickAccount} className="account-toggle no-deco d-none d-md-block" aria-label="View profile and more">
-          <span><img src={this.state.avatarURL} width="36" height="36" className="avatar" alt={gettext('Avatar')} /></span>
+          <span>{this.renderAvatar()}</span>
           <span className="fas fa-caret-down vam"></span>
         </a>
         <span className="account-toggle sf2-icon-more mobile-icon d-md-none" aria-label="View profile and more" onClick={this.onClickAccount}></span>
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 0fde633b44..f901539722 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -16,6 +16,7 @@ export const lang = window.app.config.lang;
 export const fileServerRoot = window.app.config.fileServerRoot;
 export const seafileVersion = window.app.config.seafileVersion;
 export const serviceURL = window.app.config.serviceURL;
+export const appAvatarURL = window.app.config.avatarURL;
 
 //pageOptions
 export const seafileCollabServer = window.app.pageOptions.seafileCollabServer;
diff --git a/seahub/base/context_processors.py b/seahub/base/context_processors.py
index 25e610c24a..c11dcff052 100644
--- a/seahub/base/context_processors.py
+++ b/seahub/base/context_processors.py
@@ -24,6 +24,7 @@ from seahub.settings import SEAFILE_VERSION, SITE_TITLE, SITE_NAME, \
 
 from seahub.constants import DEFAULT_ADMIN
 from seahub.utils import get_site_name, get_service_url
+from seahub.avatar.templatetags.avatar_tags import api_avatar_url
 
 try:
     from seahub.settings import SEACLOUD_MODE
@@ -86,7 +87,10 @@ def base(request):
         custom_favicon_file = os.path.join(MEDIA_ROOT, CUSTOM_FAVICON_PATH)
         if os.path.exists(custom_favicon_file):
             favicon_path = CUSTOM_FAVICON_PATH
-
+        
+        username = request.user.username
+        avatar_url, is_default, date_uploaded = api_avatar_url(username, 72)
+    
     result = {
         'seafile_version': SEAFILE_VERSION,
         'site_title': config.SITE_TITLE,
@@ -130,6 +134,7 @@ def base(request):
         'service_url': get_service_url().rstrip('/'),
         'enable_file_scan': ENABLE_FILE_SCAN,
         'enable_work_weixin_departments': ENABLE_WORK_WEIXIN_DEPARTMENTS,
+        'avatar_url': request.build_absolute_uri(avatar_url),
     }
 
     if request.user.is_staff:
diff --git a/seahub/templates/base_for_react.html b/seahub/templates/base_for_react.html
index 9ed48b5742..a97f1355fb 100644
--- a/seahub/templates/base_for_react.html
+++ b/seahub/templates/base_for_react.html
@@ -43,6 +43,7 @@
             fileServerRoot: '{{ FILE_SERVER_ROOT }}',
             serviceURL: '{{ service_url }}',
             seafileVersion: '{{ seafile_version }}',
+            avatarURL: '{{ avatar_url }}'
         },
         pageOptions: {
             csrfToken: "{{ csrf_token }}",