From f0c18cc29222439c892091bae9dd006a906f79eb Mon Sep 17 00:00:00 2001
From: highperfocused <highperfocused@pm.me>
Date: Thu, 1 May 2025 11:25:42 +0200
Subject: [PATCH] feat: Implement custom Image component and update imports in
 KIND20Card and QuickViewKind20NoteCard

---
 components/Image.tsx                   | 17 +++++++++++++++++
 components/KIND20Card.tsx              |  2 +-
 components/QuickViewKind20NoteCard.tsx |  4 ++--
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 components/Image.tsx

diff --git a/components/Image.tsx b/components/Image.tsx
new file mode 100644
index 0000000..6aac864
--- /dev/null
+++ b/components/Image.tsx
@@ -0,0 +1,17 @@
+// THIS FIXES A BUG WITH NEXT IMAGE
+// SEE: https://github.com/vercel/next.js/issues/33488
+// FIX: https://github.com/vercel/next.js/issues/33488#issuecomment-1879127189
+
+import NextImage from "next/image";
+
+const Image = ({...props }: any) => {
+    const imageLoader = ({src, width, quality}: any) => {
+        return `${src}?w=${width}&q=${quality || 75}`
+    }
+
+    return (
+        <NextImage loader={imageLoader}  {...props} />
+    )
+  }
+
+export default Image;
\ No newline at end of file
diff --git a/components/KIND20Card.tsx b/components/KIND20Card.tsx
index 6a68d89..13e9184 100644
--- a/components/KIND20Card.tsx
+++ b/components/KIND20Card.tsx
@@ -13,7 +13,7 @@ import Link from "next/link"
 import ViewCopyButton from "./ViewCopyButton"
 import type { Event as NostrEvent } from "nostr-tools"
 import ZapButton from "./ZapButton"
-import Image from "next/image"
+import Image from "@/components/Image"
 
 interface KIND20CardProps {
   pubkey: string
diff --git a/components/QuickViewKind20NoteCard.tsx b/components/QuickViewKind20NoteCard.tsx
index 292e409..bb3cd94 100644
--- a/components/QuickViewKind20NoteCard.tsx
+++ b/components/QuickViewKind20NoteCard.tsx
@@ -8,7 +8,7 @@ import {
   SmallCardContent,
 } from "@/components/ui/card"
 import Link from 'next/link';
-import Image from 'next/image';
+import Image from '@/components/Image';
 import { extractDimensions } from '@/utils/utils';
 
 interface QuickViewKind20NoteCardProps {
@@ -40,7 +40,7 @@ const QuickViewKind20NoteCard: React.FC<QuickViewKind20NoteCardProps> = ({ pubke
         <div className="h-full w-full">
           <div className='relative w-full h-full'>
             <Image 
-              src={image || "/placeholder.svg"} 
+              src={image} 
               alt={text}
               fill
               sizes="(max-width: 768px) 100vw, 300px"