viewer: implemented config.json

Note: The DevServer needs to know when the file is from the App, or from the FileSystem.
We use a tilde to make this separation. The tilde URL is declared in '.env.development'
GitHub: Resolves #32

2 files changed, 10 insertions, 9 deletions

diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 8a9a08e..a5faeb3 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -28,7 +28,7 @@
     @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
   >
     <v-lazy-image
-      :src="pictureSrc()"
+      :src="pictureSrc(picture.properties.resource)"
       :class="{'slow-loading': Boolean(slowLoadingStyle)}"
       :style="slowLoadingStyle"
       @load="clearSlowLoading"
@@ -67,15 +67,17 @@ export default class LdPicture extends Vue {
     this.loader = false;
   }
 
-  pictureSrc() {
-    return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`;
+  pictureSrc(resource: string) {
+    return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`;
   }
 
   generateSlowLoadingStyle() {
     this.clearSlowLoading();
     this.loader = true;
-    if (this.picture.thumbnail)
-      this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
+    if (this.picture.thumbnail) {
+      const url = this.pictureSrc(this.picture.thumbnail.resource);
+      this.slowLoadingStyle = `background-image: url('${url}');`;
+    }
   }
 }
 </script>
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 17c7659..13468e1 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -21,7 +21,7 @@
   <div :class="{'preload': loading}">
     <v-lazy-image
       v-if="item.thumbnail"
-      :src="pictureSrc()"
+      :src="pictureSrc(item.thumbnail.resource)"
       :style="pictureStyle()"
       :title="item.title"
       @intersect="loading=true"
@@ -44,9 +44,8 @@ export default class LdThumbnail extends Vue {
 
   loading: boolean = false;
 
-  pictureSrc() {
-    const resource = this.item.thumbnail!.resource;
-    return `${process.env.VUE_APP_DATA_URL}${resource}`;
+  pictureSrc(resource: string) {
+    return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`;
   }
 
   pictureStyle() {