feat: Implement custom Image component and update imports in KIND20Card and QuickViewKind20NoteCard

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;

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

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"