1 files changed, 5 insertions, 4 deletions
diff --git a/Timeline/ClientApp/src/app/user/UserInfoCard.tsx b/Timeline/ClientApp/src/app/user/UserInfoCard.tsx
index 8b1294c4..0f321f32 100644
--- a/Timeline/ClientApp/src/app/user/UserInfoCard.tsx
+++ b/Timeline/ClientApp/src/app/user/UserInfoCard.tsx
@@ -11,9 +11,10 @@ import { useTranslation } from 'react-i18next';
 import { fromEvent } from 'rxjs';
 
 import { timelineVisibilityTooltipTranslationMap } from '../data/timeline';
-import { useAvatarUrl } from '../data/user';
+import { useAvatar } from '../data/user';
 
 import { TimelineCardComponentProps } from '../timeline/TimelinePageTemplateUI';
+import BlobImage from '../common/BlobImage';
 
 export type PersonalTimelineManageItem = 'avatar' | 'nickname';
 
@@ -25,7 +26,7 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
   const { onHeight, onManage } = props;
   const { t } = useTranslation();
 
-  const avatarUrl = useAvatarUrl(props.timeline.owner.username);
+  const avatar = useAvatar(props.timeline.owner.username);
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const containerRef = React.useRef<HTMLDivElement>(null!);
@@ -55,8 +56,8 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => {
       className={clsx('rounded border bg-light p-2', props.className)}
       onTransitionEnd={notifyHeight}
     >
-      <img
-        src={avatarUrl}
+      <BlobImage
+        blob={avatar}
         onLoad={notifyHeight}
         className="avatar large mr-2 mb-2 rounded-circle float-left"
       />