diff --git a/client/api/client_data/Chat.ts b/client/api/client_data/Chat.ts
index 50319b8..2607314 100644
--- a/client/api/client_data/Chat.ts
+++ b/client/api/client_data/Chat.ts
@@ -4,7 +4,7 @@ export default class Chat {
     declare type: ChatType
     declare id: string
     declare title: string
-    declare avatar?: string
+    declare avatar_file_hash?: string
     declare settings?: { [key: string]: unknown }
 
     declare is_member: boolean
diff --git a/client/api/client_data/User.ts b/client/api/client_data/User.ts
index 2b279c2..4a41263 100644
--- a/client/api/client_data/User.ts
+++ b/client/api/client_data/User.ts
@@ -2,5 +2,5 @@ export default class User {
     declare id: string
     declare username?: string
     declare nickname: string
-    declare avatar?: string
+    declare avatar_file_hash?: string
 }
diff --git a/client/getUrlForFileByHash.ts b/client/getUrlForFileByHash.ts
new file mode 100644
index 0000000..4a1db3d
--- /dev/null
+++ b/client/getUrlForFileByHash.ts
@@ -0,0 +1,3 @@
+export default function getUrlForFileByHash(file_hash?: string, defaultUrl?: string) {
+    return file_hash ? "uploaded_files/" + file_hash: defaultUrl
+}
diff --git a/client/ui/App.tsx b/client/ui/App.tsx
index 8ed75b5..c8e2694 100644
--- a/client/ui/App.tsx
+++ b/client/ui/App.tsx
@@ -24,6 +24,7 @@ import AddContactDialog from './dialog/AddContactDialog.tsx'
 import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import DataCaches from "../api/DataCaches.ts"
+import getUrlForFileByHash from "../getUrlForFileByHash.ts"
 
 declare global {
     namespace React {
@@ -160,7 +161,7 @@ export default function App() {
 
             <mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
                 <mdui-button-icon slot="top">
-                    <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
+                    <Avatar src={getUrlForFileByHash(myUserProfileCache?.avatar_file_hash)} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
                 </mdui-button-icon>
 
                 <mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
diff --git a/client/ui/AppMobile.tsx b/client/ui/AppMobile.tsx
index 4973bf7..abc70bf 100644
--- a/client/ui/AppMobile.tsx
+++ b/client/ui/AppMobile.tsx
@@ -23,6 +23,7 @@ import AddContactDialog from './dialog/AddContactDialog.tsx'
 import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
 import DataCaches from "../api/DataCaches.ts"
+import getUrlForFileByHash from "../getUrlForFileByHash.ts"
 
 declare global {
     namespace React {
@@ -200,7 +201,7 @@ export default function AppMobile() {
                 }}></div>
                 <mdui-button-icon icon="settings"></mdui-button-icon>
                 <mdui-button-icon>
-                    <Avatar src={myUserProfileCache?.avatar} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
+                    <Avatar src={getUrlForFileByHash(myUserProfileCache?.avatar_file_hash)} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
                 </mdui-button-icon>
             </mdui-top-app-bar>
             {
@@ -226,7 +227,7 @@ export default function AppMobile() {
                     <ContactsList
                         openChatInfoDialog={openChatInfoDialog}
                         addContactDialogRef={addContactDialogRef as any}
-                        createGroupDialogRef={createGroupDialogRef}
+                        createGroupDialogRef={createGroupDialogRef as any}
                         display={navigationItemSelected == "Contacts"} />
                 }
             </div>
diff --git a/client/ui/chat/Message.tsx b/client/ui/chat/Message.tsx
index b53dd5e..f7d29b9 100644
--- a/client/ui/chat/Message.tsx
+++ b/client/ui/chat/Message.tsx
@@ -11,6 +11,7 @@ import React from "react"
 import isMobileUI from "../isMobileUI.ts"
 import ReactJson from 'react-json-view'
 import User from "../../api/client_data/User.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     userId: string
@@ -29,7 +30,7 @@ export default function Message({ userId, rawData, renderHTML, message, openUser
     useAsyncEffect(async () => {
         const user = await DataCaches.getUserProfile(userId)
         setNickName(user.nickname)
-        setAvatarUrl(user?.avatar)
+        setAvatarUrl(getUrlForFileByHash(user?.avatar_file_hash))
     }, [userId])
 
     const dropDownRef = React.useRef<Dropdown>(null)
@@ -40,7 +41,7 @@ export default function Message({ userId, rawData, renderHTML, message, openUser
     useEventListener(dropDownRef, 'closed', (e) => {
         setDropDownOpen(false)
     })
-    
+
     const [isDropDownOpen, setDropDownOpen] = React.useState(false)
 
     return (
@@ -114,8 +115,11 @@ export default function Message({ userId, rawData, renderHTML, message, openUser
                     padding: "15px",
                     alignSelf: isAtRight ? "flex-end" : "flex-start",
                 }}>
-                <mdui-dialog close-on-overlay-click close-on-esc ref={messageJsonDialogRef}>
-                    <ReactJson src={message} />
+                <mdui-dialog close-on-overlay-click close-on-esc fullscreen ref={messageJsonDialogRef}>
+                    {
+                        // @ts-ignore 这是可以正常工作的
+                        <ReactJson src={message} />
+                    }
                 </mdui-dialog>
                 <mdui-dropdown trigger="manual" ref={dropDownRef} open={isDropDownOpen}>
                     <span
diff --git a/client/ui/dialog/ChatInfoDialog.tsx b/client/ui/dialog/ChatInfoDialog.tsx
index 3a21324..7cfe720 100644
--- a/client/ui/dialog/ChatInfoDialog.tsx
+++ b/client/ui/dialog/ChatInfoDialog.tsx
@@ -7,6 +7,7 @@ import { Dialog } from "mdui"
 import Avatar from "../Avatar.tsx"
 import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
 import User from "../../api/client_data/User.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     chat: Chat
@@ -36,7 +37,7 @@ export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragme
                 display: 'flex',
                 alignItems: 'center',
             }}>
-                <Avatar src={chat?.avatar as string} text={chat?.nickname as string} style={{
+                <Avatar src={getUrlForFileByHash(chat?.avatar_file_hash as string)} text={chat?.nickname as string} style={{
                     width: '50px',
                     height: '50px',
                 }} />
diff --git a/client/ui/dialog/MyProfileDialog.tsx b/client/ui/dialog/MyProfileDialog.tsx
index d9d29c7..b89862f 100644
--- a/client/ui/dialog/MyProfileDialog.tsx
+++ b/client/ui/dialog/MyProfileDialog.tsx
@@ -8,6 +8,7 @@ import * as CryptoJS from 'crypto-js'
 import data from "../../Data.ts"
 import Avatar from "../Avatar.tsx"
 import User from "../../api/client_data/User.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Refs {
     myProfileDialogRef: React.MutableRefObject<Dialog>
@@ -50,7 +51,7 @@ export default function MyProfileDialog({
                 display: 'flex',
                 alignItems: 'center',
             }}>
-                <Avatar src={user?.avatar} text={user?.nickname} style={{
+                <Avatar src={getUrlForFileByHash(user?.avatar_file_hash)} text={user?.nickname} style={{
                     width: '50px',
                     height: '50px',
                 }} />
@@ -111,7 +112,7 @@ export default function MyProfileDialog({
                 display: 'flex',
                 alignItems: 'center',
             }}>
-                <Avatar src={user?.avatar} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
+                <Avatar src={getUrlForFileByHash(user?.avatar_file_hash)} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
                     width: '50px',
                     height: '50px',
                 }} />
diff --git a/client/ui/dialog/UserProfileDialog.tsx b/client/ui/dialog/UserProfileDialog.tsx
index 0fc64b0..ad0ae4a 100644
--- a/client/ui/dialog/UserProfileDialog.tsx
+++ b/client/ui/dialog/UserProfileDialog.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react'
-import { Button, Dialog, TextField, dialog } from "mdui"
-import useEventListener from "../useEventListener.ts"
-import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
+import { Dialog } from "mdui"
+import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
 import Client from "../../api/Client.ts"
 
-import * as CryptoJS from 'crypto-js'
 import data from "../../Data.ts"
 import Avatar from "../Avatar.tsx"
 import User from "../../api/client_data/User.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Refs {
     userProfileDialogRef: React.MutableRefObject<Dialog>
@@ -28,7 +27,7 @@ export default function UserProfileDialog({
                 display: 'flex',
                 alignItems: 'center',
             }}>
-                <Avatar src={user?.avatar} text={user?.nickname} style={{
+                <Avatar src={getUrlForFileByHash(user?.avatar_file_hash)} text={user?.nickname} style={{
                     width: '50px',
                     height: '50px',
                 }} />
diff --git a/client/ui/main/ContactsListItem.tsx b/client/ui/main/ContactsListItem.tsx
index 1bed435..a03e2da 100644
--- a/client/ui/main/ContactsListItem.tsx
+++ b/client/ui/main/ContactsListItem.tsx
@@ -1,4 +1,5 @@
 import Chat from "../../api/client_data/Chat.ts"
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 import Avatar from "../Avatar.tsx"
 import React from 'react'
 
@@ -8,7 +9,7 @@ interface Args extends React.HTMLAttributes<HTMLElement> {
 }
 
 export default function ContactsListItem({ contact, ...prop }: Args) {
-    const { id, title, avatar } = contact
+    const { id, title, avatar_file_hash } = contact
     const ref = React.useRef<HTMLElement>(null)
 
     return (
@@ -20,7 +21,7 @@ export default function ContactsListItem({ contact, ...prop }: Args) {
             <span style={{
                 width: "100%",
             }}>{title}</span>
-            <Avatar src={avatar as string} text={title} slot="icon" />
+            <Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
         </mdui-list-item>
     )
 }
diff --git a/client/ui/main/RecentsListItem.tsx b/client/ui/main/RecentsListItem.tsx
index f4cf7ae..391d540 100644
--- a/client/ui/main/RecentsListItem.tsx
+++ b/client/ui/main/RecentsListItem.tsx
@@ -2,6 +2,7 @@ import { $ } from "mdui/jq"
 import RecentChat from "../../api/client_data/RecentChat.ts"
 import Avatar from "../Avatar.tsx"
 import React from 'react'
+import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
 
 interface Args extends React.HTMLAttributes<HTMLElement> {
     recentChat: RecentChat
@@ -10,7 +11,7 @@ interface Args extends React.HTMLAttributes<HTMLElement> {
 }
 
 export default function RecentsListItem({ recentChat, openChatFragment, active }: Args) {
-    const { id, title, avatar, content } = recentChat
+    const { id, title, avatar_file_hash, content } = recentChat
 
     const itemRef = React.useRef<HTMLElement>(null)
     React.useEffect(() => {
@@ -22,7 +23,7 @@ export default function RecentsListItem({ recentChat, openChatFragment, active }
             marginBottom: '3px',
         }} onClick={() => openChatFragment(id)} active={active} ref={itemRef}>
             {title}
-            <Avatar src={avatar} text={title} slot="icon" />
+            <Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
             <span slot="description"
                 style={{
                     width: "100%",
diff --git a/server/api/ChatApi.ts b/server/api/ChatApi.ts
index f9b9e1b..da85d5b 100644
--- a/server/api/ChatApi.ts
+++ b/server/api/ChatApi.ts
@@ -198,7 +198,7 @@ export default class ChatApi extends BaseApi {
                             user_id: user?.bean.id,
                             reason: v.reason,
                             title: user!.getNickName(),
-                            avatar: user!.getAvatarFileHash() ? "uploaded_files/" + user!.getAvatarFileHash() : null,
+                            avatar_file_hash: user!.getAvatarFileHash() ? user!.getAvatarFileHash() : null,
                         }
                     }),
                 }
@@ -421,7 +421,7 @@ export default class ChatApi extends BaseApi {
                         id: args.target as string,
                         type: chat.bean.type,
                         title: chat.getTitle(mine),
-                        avatar: chat.getAvatarFileHash(mine) ? "uploaded_files/" + chat.getAvatarFileHash(mine) : undefined,
+                        avatar_file_hash: chat.getAvatarFileHash(mine) ? chat.getAvatarFileHash(mine) : undefined,
                         settings: JSON.parse(chat.bean.settings),
                         is_member: true,
                         is_admin: true,
@@ -436,7 +436,7 @@ export default class ChatApi extends BaseApi {
                         id: args.target as string,
                         type: chat.bean.type,
                         title: chat.getTitle(),
-                        avatar: chat.getAvatarFileHash() ? "uploaded_files/" + chat.getAvatarFileHash() : undefined,
+                        avatar_file_hash: chat.getAvatarFileHash() ? chat.getAvatarFileHash() : undefined,
                         settings: JSON.parse(chat.bean.settings),
                         is_member: UserChatLinker.checkUserIsLinkedToChat(token.author, chat!.bean.id),
                         is_admin: chat.checkUserIsAdmin(token.author),
diff --git a/server/api/UserApi.ts b/server/api/UserApi.ts
index 8c2d446..b276977 100644
--- a/server/api/UserApi.ts
+++ b/server/api/UserApi.ts
@@ -231,7 +231,7 @@ export default class UserApi extends BaseApi {
                 data: {
                     username: user!.getUserName(),
                     nickname: user!.getNickName(),
-                    avatar: user!.getAvatarFileHash() ? "uploaded_files/" + user!.getAvatarFileHash() : null,
+                    avatar_file_hash: user!.getAvatarFileHash() ? user!.getAvatarFileHash() : null,
                     id: token.author,
                 }
             }
@@ -258,7 +258,7 @@ export default class UserApi extends BaseApi {
                     content,
                     id: chatId,
                     title: chat?.getTitle(user) || "未知",
-                    avatar: chat?.getAvatarFileHash(user) ? "uploaded_files/" + chat?.getAvatarFileHash(user) : undefined
+                    avatar_file_hash: chat?.getAvatarFileHash(user) ? chat?.getAvatarFileHash(user) : undefined
                 })
             }
 
@@ -297,7 +297,7 @@ export default class UserApi extends BaseApi {
                             id,
                             type: chat?.bean.type,
                             title: chat?.getTitle(user) || "未知",
-                            avatar: chat?.getAvatarFileHash(user) ? "uploaded_files/" + chat?.getAvatarFileHash(user) : undefined
+                            avatar_file_hash: chat?.getAvatarFileHash(user) ? chat?.getAvatarFileHash(user) : undefined
                         }
                     })
                 }
@@ -366,7 +366,7 @@ export default class UserApi extends BaseApi {
                 data: {
                     username: user!.getUserName(),
                     nickname: user!.getNickName(),
-                    avatar: user!.getAvatarFileHash() ? "uploaded_files/" + user!.getAvatarFileHash() : null,
+                    avatar_file_hash: user!.getAvatarFileHash() ? user!.getAvatarFileHash() : null,
                     id: user.bean.id,
                 }
             }