2 files changed, 32 insertions, 4 deletions
diff --git a/Timeline/ClientApp/src/app/common/AppBar.tsx b/Timeline/ClientApp/src/app/common/AppBar.tsx
index 061ba08c..8349aef7 100644
--- a/Timeline/ClientApp/src/app/common/AppBar.tsx
+++ b/Timeline/ClientApp/src/app/common/AppBar.tsx
@@ -5,14 +5,15 @@ import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from 'reactstrap';
 import { useMediaQuery } from 'react-responsive';
 import { useTranslation } from 'react-i18next';
 
-import { useUser, useAvatarUrl } from '../data/user';
+import { useUser, useAvatar } from '../data/user';
 
 import TimelineLogo from './TimelineLogo';
+import BlobImage from './BlobImage';
 
 const AppBar: React.FC = (_) => {
   const history = useHistory();
   const user = useUser();
-  const avatarUrl = useAvatarUrl(user?.username);
+  const avatar = useAvatar(user?.username);
 
   const { t } = useTranslation();
 
@@ -34,9 +35,9 @@ const AppBar: React.FC = (_) => {
     <div className="ml-auto mr-2">
       {user != null ? (
         <NavLink to={`/users/${user.username}`}>
-          <img
+          <BlobImage
             className="avatar small rounded-circle bg-white"
-            src={avatarUrl}
+            blob={avatar}
           />
         </NavLink>
       ) : (
diff --git a/Timeline/ClientApp/src/app/common/BlobImage.tsx b/Timeline/ClientApp/src/app/common/BlobImage.tsx
new file mode 100644
index 00000000..91497705
--- /dev/null
+++ b/Timeline/ClientApp/src/app/common/BlobImage.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { ExcludeKey } from '../utilities/type';
+
+const BlobImage: React.FC<
+  ExcludeKey<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> & { blob?: Blob }
+> = (props) => {
+  const { blob, ...otherProps } = props;
+
+  const [url, setUrl] = React.useState<string | undefined>(undefined);
+
+  React.useEffect(() => {
+    if (blob != null) {
+      const url = URL.createObjectURL(blob);
+      setUrl(url);
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    } else {
+      setUrl(undefined);
+    }
+  }, [blob]);
+
+  return <img {...otherProps} src={url} />;
+};
+
+export default BlobImage;