...

1 files changed, 12 insertions, 3 deletions

diff --git a/FrontEnd/src/components/BlobImage.tsx b/FrontEnd/src/components/BlobImage.tsx
index 259c2210..cccf2f74 100644
--- a/FrontEnd/src/components/BlobImage.tsx
+++ b/FrontEnd/src/components/BlobImage.tsx
@@ -1,12 +1,13 @@
-import { ComponentPropsWithoutRef, useState, useEffect } from "react";
+import { ComponentPropsWithoutRef, useState, useEffect, useMemo } from "react";
 
 type BlobImageProps = Omit<ComponentPropsWithoutRef<"img">, "src"> & {
   imgRef?: React.Ref<HTMLImageElement>;
   src?: Blob | string | null;
+  keyBySrc?: boolean;
 };
 
 export default function BlobImage(props: BlobImageProps) {
-  const { imgRef, src, ...otherProps } = props;
+  const { imgRef, src, keyBySrc, ...otherProps } = props;
 
   const [url, setUrl] = useState<string | null | undefined>(undefined);
 
@@ -22,5 +23,13 @@ export default function BlobImage(props: BlobImageProps) {
     }
   }, [src]);
 
-  return <img ref={imgRef} {...otherProps} src={url ?? undefined} />;
+  const key = useMemo(() => {
+    if (keyBySrc) {
+      return url == null ? undefined : btoa(url);
+    } else {
+      return undefined;
+    }
+  }, [url, keyBySrc]);
+
+  return <img key={key} ref={imgRef} {...otherProps} src={url ?? undefined} />;
 }