✨ Images in pin modals !!!!

src/app/components/pin-marker/pin-marker.component.html

@@ -64,7 +64,7 @@
       class="relative h-40 mt-2 overflow-hidden rounded-lg flex items-center justify-center"
     >
       <div
-        *ngFor="let image of pin.files; let index = index"
+        *ngFor="let imageUrl of imageUrls; let index = index"
         [class]="
           'absolute inset-0 transition-opacity duration-700 ease-in-out' +
           (index === currentIndex ? ' opacity-100' : ' opacity-0')
@@ -74,7 +74,7 @@
           class="relative h-40 overflow-hidden rounded-lg flex items-center justify-center"
         >
           <img
-            [src]="image"
+            [src]="imageUrl"
             (load)="onImageLoad()"
             [hidden]="!imageLoaded"
             class="object-contain max-h-full max-w-full h-full w-auto mx-auto"
@@ -83,8 +83,7 @@
             *ngIf="!imageLoaded"
             class="relative inset-0 bg-gray-200 w-52 h-40 mt-2 overflow-hidden rounded-lg flex items-center justify-center"
           >
-            <!-- animate-pulse can be use -->
+            <span class="text-gray-500">Loading image...</span>
-            <span class="text-gray-500">Image not working</span>
           </div>
         </div>
       </div>

src/app/components/pin-marker/pin-marker.component.ts

@@ -6,29 +6,51 @@ import { ModalService } from '../../services/modal/modal.service';
 import { PinService } from '../../services/pin/pin.service';
 import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
 import { EditPinPopupComponent } from '../edit-pin-popup/edit-pin-popup.component';
+import { ImageService } from '../../services/image/image.service';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-pin-marker',
   templateUrl: './pin-marker.component.html',
   imports: [CommonModule, EditPinPopupComponent, ConfirmModalComponent],
+  standalone: true
 })
 export class PinMarkerComponent {
   @Input() pin!: Pin;
   @Input() marker!: L.Marker;
 
   currentIndex: number = 0;
+  imageUrls: SafeUrl[] = [];
+  imageLoaded = false;
 
   constructor(
     private pinService: PinService,
-    private modalService: ModalService
+    private modalService: ModalService,
+    private imageService: ImageService,
+    private sanitizer: DomSanitizer
   ) {}
 
+  ngOnInit() {
+    this.loadImages();
+  }
+
+  loadImages() {
+    this.pin.files.forEach(imageId => {
+      this.imageService.getImage(imageId).subscribe(blob => {
+        const objectUrl = URL.createObjectURL(blob);
+        const safeUrl = this.sanitizer.bypassSecurityTrustUrl(objectUrl);
+        this.imageUrls.push(safeUrl);
+        if (this.imageUrls.length === this.pin.files.length) {
+          this.imageLoaded = true;
+        }
+      });
+    });
+  }
+
   onClosePopup() {
     this.marker.closePopup();
   }
 
-  imageLoaded = false;
-
   onImageLoad() {
     this.imageLoaded = true;
   }
@@ -62,10 +84,17 @@ export class PinMarkerComponent {
 
   prevSlide(): void {
     this.currentIndex =
-      (this.currentIndex - 1 + this.pin.files.length) % this.pin.files.length;
+      (this.currentIndex - 1 + this.imageUrls.length) % this.imageUrls.length;
   }
 
   nextSlide(): void {
-    this.currentIndex = (this.currentIndex + 1) % this.pin.files.length;
+    this.currentIndex = (this.currentIndex + 1) % this.imageUrls.length;
+  }
+
+  ngOnDestroy() {
+    // Clean up object URLs to prevent memory leaks
+    this.imageUrls.forEach(url => {
+      URL.revokeObjectURL(url.toString());
+    });
   }
 }