diff --git a/client/ui/Avatar.jsx b/client/ui/Avatar.jsx
deleted file mode 100644
index 619410b..0000000
--- a/client/ui/Avatar.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export default function Avatar({ src, text, icon = 'person', ...props } = {}) {
-    return (
-        src ? <mdui-avatar {...props}>
-            <img src={src} alt={'(头像)' + text || ''} />
-        </mdui-avatar>
-            : (
-                text ? <mdui-avatar {...props}>
-                    {
-                        text.substring(0, 0)
-                    }
-                </mdui-avatar>
-                    : <mdui-avatar icon={icon} {...props} />
-            )
-    )
-}
diff --git a/client/ui/Avatar.tsx b/client/ui/Avatar.tsx
new file mode 100644
index 0000000..4bdbbb5
--- /dev/null
+++ b/client/ui/Avatar.tsx
@@ -0,0 +1,25 @@
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    src?: string
+    text?: string
+    icon?: string
+    avatarRef?: React.LegacyRef<HTMLElement>
+}
+
+export default function Avatar({
+    src,
+    text,
+    icon = 'person',
+    avatarRef,
+    ...props
+}: Args) {
+    if (src != null)
+        return <mdui-avatar ref={avatarRef} {...props} src={src} />
+    else if (text != null)
+        return <mdui-avatar ref={avatarRef} {...props}>
+            {
+                text.substring(0, 0)
+            }
+        </mdui-avatar>
+    else
+        return <mdui-avatar icon={icon} ref={avatarRef} {...props} />
+}