update

gnx-react/lib/imageUtils.ts

@@ -1,5 +1,7 @@
 // Image utility functions
 
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
 export const FALLBACK_IMAGES = {
   BLOG: '/images/blog/blog-poster.png',
   CASE_STUDY: '/images/case/poster.png',
@@ -19,8 +21,22 @@ export function getValidImageUrl(imageUrl?: string, fallback?: string): string {
     return imageUrl;
   }
   
-  // If it starts with /, it's already a public path
+  // If it starts with /media/, it's a Django media file - prepend API base URL
+  if (imageUrl.startsWith('/media/')) {
+    return `${API_BASE_URL}${imageUrl}`;
+  }
+  
+  // If it starts with /images/, it's a local public file
+  if (imageUrl.startsWith('/images/')) {
+    return imageUrl;
+  }
+  
+  // If it starts with /, check if it's a media file
   if (imageUrl.startsWith('/')) {
+    // If it contains /media/, prepend API base URL
+    if (imageUrl.includes('/media/')) {
+      return `${API_BASE_URL}${imageUrl}`;
+    }
     return imageUrl;
   }
   
@@ -28,6 +44,9 @@ export function getValidImageUrl(imageUrl?: string, fallback?: string): string {
   return `/${imageUrl}`;
 }
 
+// Alias for backward compatibility
+export const getImageUrl = getValidImageUrl;
+
 export function getImageAlt(title?: string, fallback: string = 'Image'): string {
   return title ? `${title} - Image` : fallback;
 }