diff --git a/src/app/components/pin-marker/pin-marker.component.html b/src/app/components/pin-marker/pin-marker.component.html
index def3ec3..d4c16a8 100644
--- a/src/app/components/pin-marker/pin-marker.component.html
+++ b/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"
>
![]()
-
-
Image not working
+
Loading image...
diff --git a/src/app/components/pin-marker/pin-marker.component.ts b/src/app/components/pin-marker/pin-marker.component.ts
index 967b674..70ae7d2 100644
--- a/src/app/components/pin-marker/pin-marker.component.ts
+++ b/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());
+ });
}
}