...

1 files changed, 27 insertions, 0 deletions

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;