diff --git a/src/common/component/Avatar.js b/src/common/component/Avatar.js
index 3f04aa06..730881c5 100644
--- a/src/common/component/Avatar.js
+++ b/src/common/component/Avatar.js
@@ -1,9 +1,12 @@
 import { useState, useEffect } from "react";
 import { getInitials, getInitialsAvatar } from "../utils";
-export default function Avatar({ url, name = "unkonw name", ...rest }) {
+export default function Avatar({ url = "", name = "unkonw name", ...rest }) {
   // console.log("avatar url", url);
   const [src, setSrc] = useState("");
-  const handleError = () => {
+  const handleError = (err) => {
+    if (url) {
+      console.log("load avatar error", url, err);
+    }
     const tmp = getInitialsAvatar({
       initials: getInitials(name),
     });
@@ -19,6 +22,6 @@ export default function Avatar({ url, name = "unkonw name", ...rest }) {
       setSrc(url);
     }
   }, [url, name]);
-
+  if (!src) return null;
   return <img src={src} onError={handleError} {...rest} />;
 }
diff --git a/src/common/component/Message/styled.js b/src/common/component/Message/styled.js
index 81383414..21028b47 100644
--- a/src/common/component/Message/styled.js
+++ b/src/common/component/Message/styled.js
@@ -24,9 +24,11 @@ const StyledMsg = styled.div`
   }
   .avatar {
     cursor: pointer;
+    width: 40px;
+    height: 40px;
     img {
-      width: 40px;
-      height: 40px;
+      width: 100%;
+      height: 100%;
       border-radius: 50%;
     }
   }