caching + remove "large" div

frontend/src/components/Gallery.vue

@@ -19,7 +19,7 @@ export default defineComponent({
 	<div class="flex" v-if="images.keys !== null">
 		<div v-for="[id, image] in images" :key="id" class="image">
 			<label>{{ image.name }}</label>
-			<Image class="gallery" :id="id" />
+			<Image class="gallery" :id="id" :images="images" redirect="home" />
 		</div>
 	</div>
 	<h1 v-else>No image found</h1>
@@ -56,7 +56,7 @@ label {
 }
 </style>
 <style>
-.gallery img {
+.gallery.imageContainer img {
 	margin: 5px;
 	max-width: max(33vw, calc(90vw/v-bind('images.size')));
 	max-height: max(33vh, calc(90vh/v-bind('images.size')));

frontend/src/components/Image.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defineComponent } from 'vue';
 import { api } from '@/http-api';
+import { ImageType } from '@/image';
 </script>
 <script lang="ts">
 export default defineComponent({
@@ -8,20 +9,35 @@ export default defineComponent({
 		id: {
 			type: Number,
 			required: true
+		},
+		images: {
+			type: Map<number, ImageType>,
+			required: true
+		},
+		redirect: {
+			type: String
+		}
+	},
+	data() {
+		return {
+			data: "" as string
 		}
 	},
 	methods: {
-		async getImage(id: number) {
+		getImage(id: number) {
+			if (this.images.has(id) && this.images.get(id)!.data != null) {
+				this.data = this.images.get(id)!.data;
+			} else {
+				this.downloadImage(id);
+			}
+		},
+		async downloadImage(id: number) {
 			const data = await api.getImage(id);
 			const reader = new window.FileReader();
 			reader.readAsDataURL(data);
 			reader.onload = () => {
-				const imgElt = document.getElementById("img-" + id) as HTMLImageElement;
+				this.data = (reader.result as string)
-				if (imgElt !== null) {
+				this.images.get(id)!.data = this.data;
-					if (reader.result as string) {
-						imgElt.setAttribute("src", (reader.result as string));
-					}
-				}
 			};
 		}
 	},
@@ -36,15 +52,24 @@ export default defineComponent({
 })
 </script>
 <template>
-	<div>
+	<div class="imageContainer">
-		<a :href="'./images/' + id" target="_blank">
+		<RouterLink v-if="redirect" :to="{ name: redirect, params: { id: id } }">
-			<img :id="'img-' + id" />
+			<img :id="'img-' + id" :src="data" />
+		</RouterLink>
+		<a v-else :href="'./images/' + id" target="_blank">
+			<img :id="'img-' + id" :src="data" />
 		</a>
 	</div>
 </template>
 
-<style scoped>
+<style>
-img:hover {
+.imageContainer img {
+	width: 100%;
+	height: 100%;
+	object-fit: contain;
+}
+
+.imageContainer:hover {
 	transform: scale(1.1);
 	transition: transform 0.5s;
 }