From b66a57071316434356e77e294ec22181e4db54d5 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 28 Aug 2023 01:41:41 +0800
Subject: ...

---
 FrontEnd/src/components/BlobImage.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'FrontEnd/src/components/BlobImage.tsx')

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} />;
 }
-- 
cgit v1.2.3

