fix image onerror infinite loop

chilli-axe · Mar 18, 2024 · 45ed70f · 45ed70f
1 parent 1a907ca
commit 45ed70f
Showing 1 changed file with 33 additions and 22 deletions.
diff --git a/frontend/src/features/card/card.tsx b/frontend/src/features/card/card.tsx
@@ -85,7 +85,11 @@ function CardImage({
     setImageState("loaded");
   };
   const onError: React.ReactEventHandler<HTMLImageElement> = (img) => {
-    setImageState("errored");
+    img.preventDefault();
+    img.currentTarget.onerror = null;
+    if (imageState !== "errored") {
+      setImageState("errored");
+    }
   };
   const handleShowDetailedView = () => {
     if (showDetailedViewOnClick && maybeCardDocument != null) {
@@ -126,14 +130,8 @@ function CardImage({
     imageCDNURL != null && maybeCardDocument?.source_type
       ? `${imageCDNURL}/images/google_drive/large/${maybeCardDocument?.identifier}.jpg`
       : maybeCardDocument?.medium_thumbnail_url;
-  const imageSrc: string | undefined =
-    imageState !== "errored"
-      ? small
-        ? smallThumbnailURL
-        : mediumThumbnailURL
-      : small
-      ? "/error_404.png"
-      : "/error_404_med.png";
+  const imageSrc = small ? smallThumbnailURL : mediumThumbnailURL;
+  const errorImageSrc = small ? "/error_404.png" : "/error_404_med.png";
   const imageAlt = maybeCardDocument?.name ?? "Unnamed Card";
 
   //# endregion
@@ -154,19 +152,32 @@ function CardImage({
             fill={true}
           />
         ) : (
-          <VisibleImage
-            ref={image}
-            className="card-img card-img-fade-in"
-            loading="lazy"
-            imageIsLoading={imageState === "loading"}
-            showDetailedViewOnClick={showDetailedViewOnClick}
-            src={imageSrc}
-            onLoadingComplete={onLoadingComplete}
-            onErrorCapture={onError}
-            onClick={handleShowDetailedView}
-            alt={imageAlt}
-            fill={true}
-          />
+          <>
+            {imageState === "errored" ? (
+              <VisibleImage
+                ref={image}
+                className="card-img card-img-fade-in"
+                loading="lazy"
+                src={errorImageSrc}
+                alt={""}
+                fill={true}
+              />
+            ) : (
+              <VisibleImage
+                ref={image}
+                className="card-img card-img-fade-in"
+                loading="lazy"
+                imageIsLoading={imageState === "loading"}
+                showDetailedViewOnClick={showDetailedViewOnClick}
+                src={imageSrc}
+                onLoadingComplete={onLoadingComplete}
+                onErrorCapture={onError}
+                onClick={handleShowDetailedView}
+                alt={imageAlt}
+                fill={true}
+              />
+            )}
+          </>
         ))}
     </>
   );