Fix: Try again

src/components/PersonCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState }  from "react";
 import "../styles/global.css";
 import "../styles/members.css";
 
@@ -27,11 +27,27 @@ const getClassName = (team: string) => {
 
 const PersonCard: React.FC<PersonCardProps> = ({ team, desc, name, cover }) => {
   const className = getClassName(team);
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchImage = async () => {
+      try {
+        const response = await fetch(`/api/images/${cover}`);
+        if (!response.ok) throw new Error('Image not found');
+        const blob = await response.blob();
+        setImageSrc(URL.createObjectURL(blob));
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchImage();
+  }, [cover]);
 
   return (
     <div className="person-card">
       <div className="img-wrapper">
-        <img src={cover} alt={name} />
+        {imageSrc ? <img src={imageSrc} alt={name} /> : <p>Loading...</p>} {/* Show loading state */}
       </div>
       <p className={className}>
         <b>{name}</b><br />

src/pages/api/images/[...image].ts

@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path from 'path';
+import type { APIRoute } from 'astro';
+
+export const get: APIRoute = ({ params }) => {
+    // Check if params.image is defined
+    const imageParam = params.image as string; // Cast to string
+    if (!imageParam) {
+        return new Response('Image not specified', { status: 400 });
+    }
+
+    const imagePath = path.join('data', 'members', imageParam); // Use the imageParam directly
+
+    // Check if the image file exists
+    if (fs.existsSync(imagePath)) {
+        const imageBuffer = fs.readFileSync(imagePath);
+        return new Response(imageBuffer, {
+            headers: {
+                'Content-Type': 'image/webp', // Adjust the content type as necessary
+            },
+        });
+    } else {
+        return new Response('Image not found', { status: 404 });
+    }
+};

src/scripts/getMembers.ts

@@ -112,8 +112,10 @@ export async function getMembers(): Promise<Member[]> {
                 console.log(`Image ${imageName} downloaded and saved.`);
             }
 
-            // Update the member's cover to point to the local file path
-            member.cover = `/api/members/${imageName}`;
+
+            member.cover = `${sanitizedFileName}.webp`; // Only the file name, no path
+
+
         } catch (err) {
             console.error(`Failed to download or process image for ${member.name}:`, err);
         }