use nextjs Image Tag and use nostr.band relay

lumina/app/page.tsx

@@ -8,7 +8,8 @@ import GlobalFeed from "@/components/GlobalFeed";
 import { NostrProvider } from "nostr-react";
 
 const relayUrls = [
-  "wss://relay.damus.io"
+  "wss://relay.damus.io",
+  "wss://relay.nostr.band",
 ];
 
 export default function Home() {

lumina/app/profile/[pubkey]/page.tsx

@@ -11,6 +11,7 @@ import { SectionIcon, GridIcon } from '@radix-ui/react-icons'
 
 const relayUrls = [
   "wss://relay.damus.io",
+  "wss://relay.nostr.band",
 ];
 
 export default function Home() {

lumina/components/NoteCard.tsx

@@ -29,6 +29,7 @@ import {
 import ReactionButton from '@/components/ReactionButton';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import ViewRawButton from '@/components/ViewRawButton';
+import Image from 'next/image';
 
 interface NoteCardProps {
   pubkey: string;
@@ -89,11 +90,19 @@ const NoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tags, event
                 <CarouselContent>
                   {imageSrc.map((src, index) => (
                     <CarouselItem key={index}>
-                      <img
+                      {/* <img
                         key={index}
                         src={src}
                         style={{ maxWidth: '100%', maxHeight: '100vh', objectFit: 'contain', margin: 'auto'}}
-                      />
+                      /> */}
+                      <Image
+                        key={index}
+                        src={src}
+                        alt={textWithoutImage}
+                        width={500}
+                        height={500}
+                        layout="responsive"
+                        objectFit="contain" />
                     </CarouselItem>
                   ))}
                 </CarouselContent>
@@ -101,7 +110,14 @@ const NoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tags, event
                 <CarouselNext />
               </Carousel>
             ) : (
-              imageSrc ? <img src={imageSrc[0]} style={{ maxWidth: '100%', maxHeight: '100vh', objectFit: 'contain', margin: 'auto'}} /> : ""
+              // imageSrc ? <img src={imageSrc[0]} style={{ maxWidth: '100%', maxHeight: '100vh', objectFit: 'contain', margin: 'auto'}} /> : ""
+              imageSrc ? <Image
+                src={imageSrc[0]}
+                alt={textWithoutImage}
+                width={500}
+                height={500}
+                layout="responsive"
+                objectFit="contain" /> : ""
             )}
           </div>
           }

lumina/next.config.mjs

@@ -1,6 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     output: 'standalone',
+    images: {
+        remotePatterns: [
+          {
+            protocol: 'https',
+            hostname: '**',
+            port: '',
+            pathname: '/**',
+          },
+        ],
+      },
 };
 
 export default nextConfig;