Image error resolve

src/services/educationService.ts

@@ -48,9 +48,27 @@ export interface CourseApplicationData {
 class EducationService {
   private apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080';
 
+  // Helper method to convert relative URLs to absolute URLs
+  private getFullImageUrl(imageUrl: string | undefined): string {
+    if (!imageUrl || imageUrl.trim() === '') {
+      return this.getRandomDefaultImage();
+    }
+    
+    // If it's already a full URL, return as-is
+    if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
+      return imageUrl;
+    }
+    
+    // If it's a relative URL, prepend the backend API URL
+    const cleanUrl = imageUrl.startsWith('/') ? imageUrl.substring(1) : imageUrl;
+    return `${this.apiBaseUrl}/${cleanUrl}`;
+  }
+
   async getActiveCourses(): Promise<Course[]> {
     try {
-      const response = await fetch(`${this.apiBaseUrl}/api/courses/active`);
+      const response = await fetch(`${this.apiBaseUrl}/api/courses/active`, {
+        cache: 'no-store'
+      });
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
@@ -58,33 +76,33 @@ class EducationService {
       return this.transformApiCoursesToCourses(apiCourses);
     } catch (error) {
       console.error('Error fetching courses:', error);
-      return this.getFallbackCourses(); // Return fallback data if API fails
+      return this.getFallbackCourses();
     }
   }
 
   async getCourseById(id: number): Promise<Course | null> {
-  try {
-    const token = localStorage.getItem('authToken'); // Or from cookies/session
-    const response = await fetch(`${this.apiBaseUrl}/api/courses/${id}`, {
-      headers: {
-        'Content-Type': 'application/json',
-        ...(token ? { Authorization: `Bearer ${token}` } : {}),
-      },
-    });
+    try {
+      const token = typeof window !== 'undefined' ? localStorage.getItem('authToken') : null;
+      const response = await fetch(`${this.apiBaseUrl}/api/courses/${id}`, {
+        headers: {
+          'Content-Type': 'application/json',
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+        cache: 'no-store'
+      });
 
-    if (!response.ok) {
-      if (response.status === 404) return null;
-      throw new Error(`HTTP error! status: ${response.status}`);
+      if (!response.ok) {
+        if (response.status === 404) return null;
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const apiCourse: ApiCourse = await response.json();
+      return this.transformApiCourseToCourse(apiCourse);
+    } catch (error) {
+      console.error(`Error fetching course ${id}:`, error);
+      return null;
     }
-
-    const apiCourse: ApiCourse = await response.json();
-    return this.transformApiCourseToCourse(apiCourse);
-  } catch (error) {
-    console.error(`Error fetching course ${id}:`, error);
-    return null;
   }
-}
-
 
   async submitApplication(applicationData: CourseApplicationData): Promise<boolean> {
     try {
@@ -119,29 +137,12 @@ class EducationService {
       instructor: apiCourse.instructor,
       price: apiCourse.price || 'N/A',
       startDate: apiCourse.startDate || '',
-      image: this.getImageUrl(apiCourse.imageUrl),
+      image: this.getFullImageUrl(apiCourse.imageUrl),
       eligibility: apiCourse.eligibility || [],
       objectives: apiCourse.objectives || []
     };
   }
 
- private getImageUrl(imageUrl?: string): string {
-  if (imageUrl) {
-    // If imageUrl starts with /uploads/, prepend the full API path
-    if (imageUrl.startsWith('/uploads/')) {
-      return `${this.apiBaseUrl}/api/files${imageUrl}`; // This adds /api/files before /uploads/
-    }
-    // If it's already a full URL, return as is
-    if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
-      return imageUrl;
-    }
-    // Otherwise, assume it's a relative path and prepend base URL with API path
-    return `${this.apiBaseUrl}/api/files/${imageUrl}`;
-  }
-  // Return random default image if no imageUrl provided
-  return this.getRandomDefaultImage();
-}
-
   private getRandomDefaultImage(): string {
     const defaultImages = [
       "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=200&fit=crop&crop=center",
@@ -155,7 +156,6 @@ class EducationService {
   }
 
   private getFallbackCourses(): Course[] {
-    // Return the original hardcoded courses as fallback
     return [
       {
         id: '1',