diff options
Diffstat (limited to 'viewer/src/components/LdThumbnail.vue')
-rw-r--r-- | viewer/src/components/LdThumbnail.vue | 18 |
1 files changed, 9 insertions, 9 deletions
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue index e774f00..5b1bc82 100644 --- a/viewer/src/components/LdThumbnail.vue +++ b/viewer/src/components/LdThumbnail.vue | |||
@@ -18,20 +18,20 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <div :class="{'preload': loading}"> | 21 | <div :class="{ preload: loading }"> |
22 | <v-lazy-image | 22 | <v-lazy-image |
23 | v-if="item.thumbnail" | 23 | v-if="item.thumbnail" |
24 | :src="pictureSrc(item.thumbnail.resource)" | 24 | :src="pictureSrc(item.thumbnail.resource)" |
25 | :style="pictureStyle()" | 25 | :style="pictureStyle" |
26 | :title="item.title" | 26 | :title="item.title" |
27 | @intersect="loading=true" | 27 | @intersect="loading = true" |
28 | @load="loading=false" | 28 | @load="loading = false" |
29 | /> | 29 | /> |
30 | <div v-else class="thumbnail-other flex-column flex-center"> | 30 | <div v-else class="thumbnail-other flex-column flex-center"> |
31 | <div> | 31 | <div> |
32 | <fa-icon :icon="getIcon()" size="4x" /> | 32 | <fa-icon :icon="icon" size="4x" /> |
33 | </div> | 33 | </div> |
34 | {{item.title}} | 34 | {{ item.title }} |
35 | </div> | 35 | </div> |
36 | </div> | 36 | </div> |
37 | </template> | 37 | </template> |
@@ -47,15 +47,15 @@ export default class LdThumbnail extends Vue { | |||
47 | loading: boolean = false; | 47 | loading: boolean = false; |
48 | 48 | ||
49 | pictureSrc(resource: string) { | 49 | pictureSrc(resource: string) { |
50 | return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`; | 50 | return this.$galleryStore.resourceRoot + resource; |
51 | } | 51 | } |
52 | 52 | ||
53 | pictureStyle() { | 53 | get pictureStyle() { |
54 | const resolution = this.item.thumbnail!.resolution; | 54 | const resolution = this.item.thumbnail!.resolution; |
55 | return { width: `${resolution.width}px`, height: `${resolution.height}px` }; | 55 | return { width: `${resolution.width}px`, height: `${resolution.height}px` }; |
56 | } | 56 | } |
57 | 57 | ||
58 | getIcon() { | 58 | get icon() { |
59 | return Navigation.getIcon(this.item); | 59 | return Navigation.getIcon(this.item); |
60 | } | 60 | } |
61 | } | 61 | } |