1 files changed, 16 insertions, 17 deletions
diff --git a/FrontEnd/src/views/common/BlobImage.tsx b/FrontEnd/src/views/common/BlobImage.tsx
index 5e050ebe..259c2210 100644
--- a/FrontEnd/src/views/common/BlobImage.tsx
+++ b/FrontEnd/src/views/common/BlobImage.tsx
@@ -1,27 +1,26 @@
-import * as React from "react";
+import { ComponentPropsWithoutRef, useState, useEffect } from "react";
 
-const BlobImage: React.FC<
-  Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> & {
-    blob?: Blob | unknown;
-  }
-> = (props) => {
-  const { blob, ...otherProps } = props;
+type BlobImageProps = Omit<ComponentPropsWithoutRef<"img">, "src"> & {
+  imgRef?: React.Ref<HTMLImageElement>;
+  src?: Blob | string | null;
+};
+
+export default function BlobImage(props: BlobImageProps) {
+  const { imgRef, src, ...otherProps } = props;
 
-  const [url, setUrl] = React.useState<string | undefined>(undefined);
+  const [url, setUrl] = useState<string | null | undefined>(undefined);
 
-  React.useEffect(() => {
-    if (blob instanceof Blob) {
-      const url = URL.createObjectURL(blob);
+  useEffect(() => {
+    if (src instanceof Blob) {
+      const url = URL.createObjectURL(src);
       setUrl(url);
       return () => {
         URL.revokeObjectURL(url);
       };
     } else {
-      setUrl(undefined);
+      setUrl(src);
     }
-  }, [blob]);
-
-  return <img {...otherProps} src={url} />;
-};
+  }, [src]);
 
-export default BlobImage;
+  return <img ref={imgRef} {...otherProps} src={url ?? undefined} />;
+}