use AuthenticatedImage component in Items view

web/src/components/AuthenticatedImage.vue

@@ -0,0 +1,43 @@
+<template>
+    <img :src="image_data" :alt="src">
+</template>
+
+<style scoped>
+</style>
+
+<script>
+
+import {mapActions} from "vuex";
+
+export default {
+    name: "AuthenticatedImage",
+    props: {
+        src: {
+            type: String,
+            required: true
+        },
+    },
+    data() {
+        return {
+            image_data: "",
+            servers: []
+        }
+    },
+    methods: {
+        ...mapActions(['fetchImage']),
+        loadImage() {
+            this.fetchImage(this.src).then((response) => {
+                const mime_type = response.headers.get("content-type");
+                response.arrayBuffer().then((buf) => {
+                    const base64 = btoa(new Uint8Array(buf)
+                        .reduce((data, byte) => data + String.fromCharCode(byte), ""));
+                    this.image_data = "data:" + mime_type + ";base64," + base64;
+                });
+            })
+        }
+    },
+    mounted() {
+        this.loadImage();
+    }
+}
+</script>

web/src/components/Lightbox.vue

@@ -1,12 +1,12 @@
 <template>
     <Modal @close="$emit('close')">
         <template #body>
-            <img
+            <AuthenticatedImage
                 class="img-fluid rounded mx-auto d-block mb-3 w-100"
-                :src="`${baseUrl}/1/images/${file}`"
+                :src="`/media/2/${file}/`"
                 alt="Image not available."
                 id="lightbox-image"
-            >
+            />
         </template>
         <template #buttons>
             <button type="button" class="btn btn-secondary" @click="$emit('close')">Cancel</button>
@@ -16,15 +16,11 @@
 
 <script>
 import Modal from '@/components/Modal';
-import config from '../config';
 
 export default {
     name: 'Lightbox',
     components: {Modal},
-    props: ['file'],
-    data: () => ({
-        baseUrl: config.service.url,
-    }),
+    props: ['file']
 };
 </script>