From 2d5dcb139b7e67981dfb06f9cb8c272c9e007fbf Mon Sep 17 00:00:00 2001
From: highperfocused <highperfocused@pm.me>
Date: Tue, 1 Apr 2025 22:05:03 +0200
Subject: [PATCH] update KIND20Card to handle image loading errors with a
 placeholder image

---
 components/KIND20Card.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/KIND20Card.tsx b/components/KIND20Card.tsx
index 9b9ea56..c8a61cd 100644
--- a/components/KIND20Card.tsx
+++ b/components/KIND20Card.tsx
@@ -38,8 +38,9 @@ const KIND20Card: React.FC<KIND20CardProps> = ({
     pubkey,
   })
   const [imageError, setImageError] = useState(false);
+  const [imageState, setImageState] = useState(image);
 
-  if (!image || !image.startsWith("http") || imageError) return null;
+  // if (!image || !image.startsWith("http") || imageError) return null;
   
   const title =
     userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey)
@@ -82,11 +83,14 @@ const KIND20Card: React.FC<KIND20CardProps> = ({
               <div className="w-full">
                 <div className="relative w-full" style={{ paddingBottom: "100%" }}>
                   <Image
-                    src={image}
+                    src={imageState || "/placeholder.png"}
                     alt={text}
                     fill
                     className="rounded-lg object-contain"
-                    onError={() => setImageError(true)}
+                    // onError={() => setImageError(true)}
+                    onError={() => {
+                      setImageState("/placeholder.png")
+                    }}
                   />
                 </div>
               </div>