feat: optimize display effect when image loading fails

src/components/NoteCard/GroupMetadataCard.tsx

@@ -93,7 +93,11 @@ export default function GroupMetadataCard({
         </div>
         <div className="flex gap-2 items-start mt-2">
           {metadata.picture && (
-            <Image image={{ url: metadata.picture }} className="h-32 aspect-square rounded-lg" />
+            <Image
+              image={{ url: metadata.picture }}
+              className="h-32 aspect-square rounded-lg"
+              hideIfError
+            />
           )}
           <div className="flex-1 w-0 space-y-1">
             <div className="text-xl font-semibold line-clamp-1">{metadata.name}</div>

src/components/NoteCard/LiveEventCard.tsx

@@ -120,6 +120,7 @@ export default function LiveEventCard({
             <Image
               image={{ url: metadata.image }}
               className="w-full aspect-video object-cover rounded-lg"
+              hideIfError
             />
           )}
           <div className="space-y-1">
@@ -148,7 +149,7 @@ export default function LiveEventCard({
           </div>
         </div>
         {metadata.image && (
-          <Image image={{ url: metadata.image }} className="h-36 max-w-44 rounded-lg" />
+          <Image image={{ url: metadata.image }} className="h-36 max-w-44 rounded-lg" hideIfError />
         )}
       </div>
       {!embedded && <Separator />}

src/components/NoteCard/LongFormArticleCard.tsx

@@ -113,6 +113,7 @@ export default function LongFormArticleCard({
             <Image
               image={{ url: metadata.image }}
               className="w-full aspect-video object-cover rounded-lg"
+              hideIfError
             />
           )}
           <div className="space-y-1">
@@ -141,7 +142,7 @@ export default function LongFormArticleCard({
           </div>
         </div>
         {metadata.image && (
-          <Image image={{ url: metadata.image }} className="h-36 max-w-48 rounded-lg" />
+          <Image image={{ url: metadata.image }} className="rounded-lg h-36 max-w-48" hideIfError />
         )}
       </div>
       {!embedded && <Separator />}