Build fix

package.json

@@ -29,7 +29,7 @@
     "@preline/tabs": "^2.4.1",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.16.6",
+    "astro": "^4.16.7",
     "astro-compressor": "^0.4.1",
     "astro-icon": "^1.1.1",
     "clipboard": "^2.0.11",

src/components/FreelancerCard.astro

@@ -1,5 +1,6 @@
 ---
 import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
 const { freelancer } = Astro.props;
 
 // Import social icons
@@ -21,6 +22,12 @@ function getFlagEmoji(countryCode: string) {
     .map(char => 127397 + char.charCodeAt(0));
   return String.fromCodePoint(...codePoints);
 }
+// Import all images at build time with proper typing
+const imageFiles: Record<string, ImageMetadata> = import.meta.glob('/src/images/freelancers/*.{jpeg,jpg,png,gif}', {
+  eager: true,
+  import: 'default'
+});
+
 // Add image import utility function
 async function getFreelancerImage(photoPath: string) {
   try {
@@ -32,8 +39,11 @@ async function getFreelancerImage(photoPath: string) {
   }
 }
 
-// Get the image for this freelancer
-const freelancerImage = await getFreelancerImage(freelancer.photo);
+// Construct the correct image path
+const imagePath = `/src/images/freelancers/${freelancer.photo}`;
+
+// Get the image from our glob with type checking
+const freelancerImage: ImageMetadata | undefined = imageFiles[imagePath];
 ---
 <style>
 .short-pitch {
@@ -49,14 +59,20 @@ const freelancerImage = await getFreelancerImage(freelancer.photo);
 
 <div class="bg-neutral-100 dark:bg-white/[.075] rounded-xl shadow-md overflow-hidden mb-10">
   <a href={`/jobs/${freelancer.id}`}>
-    <Image 
+    {freelancerImage ? (
+      <Image 
         src={freelancerImage}
         alt={`${freelancer.firstName} ${freelancer.lastName}`}
         width={400}
         height={192}
         class="w-full h-48 object-cover"
       />
-    </a>
+    ) : (
+      <div class="w-full h-48 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+        <span class="text-gray-500 dark:text-gray-400">Image not available</span>
+      </div>
+    )}
+  </a>
   <div class="p-6">
     <h2 class="text-2xl font-semibold mb-2 text-blue-500 dark:text-blue-400">{`${freelancer.firstName} ${freelancer.lastName}`}</h2>
     <p class="text-pink-500 dark:text-pink-400 mb-2">{freelancer.headline}</p>

src/pages/jobs/[id].astro

@@ -3,15 +3,21 @@ import MainLayout from '../../layouts/MainLayout.astro';
 import MainSection from "../../components/ui/blocks/MainSection.astro";
 import freelancers from '../../data_files/freelancers.json';
 import { Image } from 'astro:assets';
+import type { ImageMetadata } from 'astro';
 import { Icon } from 'astro-icon/components';
 // Import PrimaryCTA component
 import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro";
 
+// Import all images at build time with proper typing
+const imageFiles: Record<string, ImageMetadata> = import.meta.glob('/src/images/freelancers/*.{jpeg,jpg,png,gif}', {
+  eager: true,
+  import: 'default'
+});
+
 export function getStaticPaths() {
-  // Only generate pages for visible freelancers
   return freelancers.filter(freelancer => freelancer.isVisible).map((freelancer) => ({
     params: { id: freelancer.id.toString() },
-    props: { freelancer },
+    props: { freelancer }
   }));
 }
 
@@ -30,21 +36,12 @@ function getFlagEmoji(countryCode: string) {
   return String.fromCodePoint(...codePoints);
 }
 
-// Utility function to get image path
-async function getFreelancerImage(photoPath: string) {
-  try {
-    // Dynamic import of the image from the freelancers directory
-    const imageModule = await import(`../../images/freelancers/${photoPath}`);
-    return imageModule.default;
-  } catch (error) {
-    console.error(`Error loading image for ${photoPath}:`, error);
-    // You might want to return a default/fallback image here
-    return null;
-  }
-}
+// Construct the correct image path
+const imagePath = `/src/images/freelancers/${freelancer.photo}`;
+
+// Get the image from our glob
+const freelancerImage: ImageMetadata | undefined = imageFiles[imagePath];
 
-// Get the image for the current freelancer
-const freelancerImage = await getFreelancerImage(freelancer.photo);
 ---
 
 <MainLayout