diff --git a/frontend/app/gallery/directory/directory.gallery.component.html b/frontend/app/gallery/directory/directory.gallery.component.html
index 1e31d20d..5990b733 100644
--- a/frontend/app/gallery/directory/directory.gallery.component.html
+++ b/frontend/app/gallery/directory/directory.gallery.component.html
@@ -2,10 +2,10 @@
style="display: inline-block;">
-
+
+ [style.background-image]="getSanitizedThUrl()">
diff --git a/frontend/app/gallery/directory/directory.gallery.component.ts b/frontend/app/gallery/directory/directory.gallery.component.ts
index b0aa6ef0..0cd33c33 100644
--- a/frontend/app/gallery/directory/directory.gallery.component.ts
+++ b/frontend/app/gallery/directory/directory.gallery.component.ts
@@ -1,4 +1,5 @@
import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
+import {DomSanitizer} from "@angular/platform-browser";
import {DirectoryDTO} from "../../../../common/entities/DirectoryDTO";
import {RouterLink} from "@angular/router";
import {Utils} from "../../../../common/Utils";
@@ -16,16 +17,19 @@ export class GalleryDirectoryComponent implements OnInit, OnDestroy {
@ViewChild("dirContainer") container: ElementRef;
thumbnail: Thumbnail = null;
- constructor(private thumbnailService: ThumbnailManagerService) {
+ constructor(private thumbnailService: ThumbnailManagerService, private _sanitizer: DomSanitizer) {
}
ngOnInit() {
if (this.directory.photos.length > 0) {
this.thumbnail = this.thumbnailService.getThumbnail(new Photo(this.directory.photos[0], 100, 100));
-
}
}
+ getSanitizedThUrl() {
+ return this._sanitizer.bypassSecurityTrustStyle('url(' + encodeURI(this.thumbnail.Src).replace(/\(/g, "%28").replace(/\)/g, "%29") + ')');
+ }
+
//TODO: implement scroll
isInView(): boolean {
return document.body.scrollTop < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight
diff --git a/frontend/app/gallery/gallery.component.html b/frontend/app/gallery/gallery.component.html
index 3f924db6..bb315ca0 100644
--- a/frontend/app/gallery/gallery.component.html
+++ b/frontend/app/gallery/gallery.component.html
@@ -36,4 +36,4 @@
-
\ No newline at end of file
+
diff --git a/frontend/app/gallery/thumnailManager.service.ts b/frontend/app/gallery/thumnailManager.service.ts
index d728736c..61edf880 100644
--- a/frontend/app/gallery/thumnailManager.service.ts
+++ b/frontend/app/gallery/thumnailManager.service.ts
@@ -14,7 +14,7 @@ export class ThumbnailManagerService {
constructor(private thumbnailLoader: ThumbnailLoaderService) {
}
- public getThumbnail(photo: Photo) {
+ public getThumbnail(photo: Photo): Thumbnail {
return new Thumbnail(photo, this.thumbnailLoader);
}