Image error solve update

support-portal-frontend/src/app/component/event/event.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { EventService } from 'src/app/service/event.service';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-event',
@@ -9,21 +9,46 @@ import { EventService } from 'src/app/service/event.service';
   styleUrls: ['./event.component.css']
 })
 export class EventComponent implements OnInit {
-  events: any[] = []; // Define the type according to your model
+  events: any[] = [];
-
+  
   constructor(private eventService: EventService, private router: Router) { }
-
+  
   ngOnInit(): void {
     this.loadEvents();
   }
-
+  
   loadEvents(): void {
-    this.eventService.getEvents().subscribe(events => this.events = events);
+    this.eventService.getEvents().subscribe(events => {
+      console.log('Raw events from API:', events);
+      
+      // Convert relative URLs to absolute URLs using the backend domain
+      this.events = events.map(event => ({
+        ...event,
+        mainImage: this.getFullImageUrl(event.mainImage)
+      }));
+      
+      console.log('Processed events:', this.events);
+    });
   }
-
+  
+  // Convert relative URL to full URL
+  private getFullImageUrl(imageUrl: string): string {
+    if (!imageUrl) return '';
+    
+    // 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
+    // Remove any leading slash to avoid double slashes
+    const cleanUrl = imageUrl.startsWith('/') ? imageUrl.substring(1) : imageUrl;
+    return `${environment.apiUrl}/${cleanUrl}`;
+  }
+  
   deleteEvent(id: number): void {
     if (confirm('Are you sure you want to delete this event?')) {
-      // this.eventService.deleteEvent(id).subscribe(() => this.loadEvents());
+      this.eventService.deleteEvent(id).subscribe(() => this.loadEvents());
     }
   }
 }

support-portal-frontend/src/app/service/event.service.ts

@@ -22,6 +22,31 @@ export class EventService {
     console.log('EventService initialized with API URL:', this.apiUrl);
   }
 
+  // Helper method to convert relative URLs to absolute URLs
+  private getFullImageUrl(imageUrl: string): string {
+    if (!imageUrl) return '';
+    
+    // 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 `${environment.apiUrl}/${cleanUrl}`;
+  }
+
+  // Process event to fix image URLs
+  private processEvent(event: any): any {
+    if (!event) return event;
+    
+    return {
+      ...event,
+      mainImage: this.getFullImageUrl(event.mainImage),
+      galleryImages: event.galleryImages?.map((img: string) => this.getFullImageUrl(img)) || []
+    };
+  }
+
   // Upload single image file
   uploadImage(file: File): Observable<any> {
     const formData = new FormData();
@@ -34,6 +59,10 @@ export class EventService {
       .pipe(
         map(response => {
           console.log('Image uploaded successfully:', response);
+          // Ensure the URL is absolute
+          if (response.url) {
+            response.url = this.getFullImageUrl(response.url);
+          }
           return response;
         }),
         catchError(this.handleError<any>('uploadImage'))
@@ -80,7 +109,8 @@ export class EventService {
       .pipe(
         map(events => {
           console.log('Events received:', events);
-          return events;
+          // Process all events to fix image URLs
+          return events.map(event => this.processEvent(event));
         }),
         catchError(this.handleError<any[]>('getEvents', []))
       );
@@ -94,7 +124,8 @@ export class EventService {
       .pipe(
         map(event => {
           console.log('Event received:', event);
-          return event;
+          // Process event to fix image URLs
+          return this.processEvent(event);
         }),
         catchError(this.handleError<any>(`getEvent id=${id}`))
       );
@@ -107,7 +138,7 @@ export class EventService {
       .pipe(
         map(response => {
           console.log('Event created successfully:', response);
-          return response;
+          return this.processEvent(response);
         }),
         catchError(this.handleError<any>('createEvent'))
       );
@@ -121,7 +152,7 @@ export class EventService {
       .pipe(
         map(response => {
           console.log('Event updated successfully:', response);
-          return response;
+          return this.processEvent(response);
         }),
         catchError(this.handleError<any>('updateEvent'))
       );