updates

frontEnd/lib/imageUtils.ts

@@ -10,6 +10,40 @@ export const FALLBACK_IMAGES = {
   DEFAULT: '/images/logo.png'
 };
 
+/**
+ * Get the correct image URL for the current environment
+ * 
+ * During build: Use internal backend URL so Next.js can fetch images
+ * During runtime (client): Use relative URLs (nginx serves media files)
+ * During runtime (server/SSR): Use relative URLs (nginx serves media files)
+ * In development: Use API_BASE_URL (which points to backend)
+ */
+function getImageBaseUrl(): string {
+  const isServer = typeof window === 'undefined';
+  const isProduction = process.env.NODE_ENV === 'production';
+  
+  // Check if we're in build phase (Next.js build context)
+  const isBuildTime = 
+    !process.env.NEXT_RUNTIME ||  // Not set during build
+    process.env.NEXT_PHASE === 'phase-production-build' || 
+    process.env.NEXT_PHASE === 'phase-production-compile';
+  
+  // During build time in production: use internal backend URL
+  // This allows Next.js to fetch images during static generation
+  if (isProduction && isBuildTime && isServer) {
+    return process.env.INTERNAL_API_URL || 'http://127.0.0.1:1086';
+  }
+  
+  // Runtime (both client and server): use relative URLs
+  // Nginx will serve /media/ files directly
+  if (isProduction) {
+    return '';
+  }
+  
+  // Development: use API_BASE_URL (which points to backend)
+  return API_BASE_URL;
+}
+
 export function getValidImageUrl(imageUrl?: string, fallback?: string): string {
   if (!imageUrl || imageUrl.trim() === '') {
     return fallback || FALLBACK_IMAGES.DEFAULT;
@@ -20,22 +54,28 @@ export function getValidImageUrl(imageUrl?: string, fallback?: string): string {
     return imageUrl;
   }
   
-  // If it starts with /media/, it's a Django media file - prepend API base URL
+  // Get the base URL for images (handles client/server differences)
+  const baseUrl = getImageBaseUrl();
+  
+  // If it starts with /media/, it's a Django media file
   if (imageUrl.startsWith('/media/')) {
-    return `${API_BASE_URL}${imageUrl}`;
+    // In production client-side, baseUrl is empty, so this becomes /media/... (correct)
+    // In production server-side, baseUrl is the domain, so this becomes https://domain.com/media/... (correct)
+    return `${baseUrl}${imageUrl}`;
   }
   
-  // If it starts with /images/, it's a local public file
+  // If it starts with /images/, it's a local public file (always relative)
   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 it contains /media/, prepend base URL
     if (imageUrl.includes('/media/')) {
-      return `${API_BASE_URL}${imageUrl}`;
+      return `${baseUrl}${imageUrl}`;
     }
+    // Other absolute paths (like /static/) are served directly
     return imageUrl;
   }