add: check multiple preview file extensions

frontend/src/components/ItemDetails.vue

@@ -1,9 +1,7 @@
 <template>
     <div class="flex md6 lg4">
         <va-card id="preview" class="content-container">
-            <va-image
-                :src="`${this.baseURL}/static/previews/${this.itemDetails.fadr}+/${this.itemDetails.internal_id}.bmp`"
-                :alt="`${this.itemDetails.description}`">
+            <va-image contain :src="slotPreviewPath" :alt="`${this.itemDetails.description}`">
                 <template #loader>
                     <va-progress-circle indeterminate />
                 </template>
@@ -64,6 +62,7 @@ export default {
             ],
             itemPreview: {},
             baseURL: "http://localhost:8080",
+            imageExtension: "bmp"
         };
     },
     methods: {
@@ -74,17 +73,34 @@ export default {
                 .then(data => this.itemDetails = data)
                 .catch((e) => console.log(e));
         },
-        async fetchItemPreview() {
-            const baseURL = "http://localhost:8080/api/v1";
-            fetch(`${baseURL}/static/previews/${this.itemDetails.fadr}+/${this.itemDetails.internal_id}.bmp`)
-                .then(res => res.json())
-                .then(data => this.itemPreview = data)
-                .catch((e) => console.log(e));
+        getPreviewPath(){
+            for (let extension of ["jpg", "png", "bmp"]) {
+                const path = `${this.baseURL}/static/previews/${this.itemDetails.fadr}+/${this.itemDetails.internal_id}.${extension}`
+                fetch(path, {method: 'HEAD'})
+                    .then(resp => {
+                        if (resp.status === 200) {
+                            this.imageExtension = extension;
+                        }
+                    })
+                    .catch(e => {
+                        // 404 are expected here, so ignore it
+                        if (e.status !== 404){
+                            //console.log(e)
+                        }
+                    })
+            }
+
+            return `${this.baseURL}/static/previews/${this.itemDetails.fadr}+/${this.itemDetails.internal_id}.${this.imageExtension}`
         }
     },
     created() {
         this.fetchItemDetails();
     },
+    computed: {
+        slotPreviewPath(){
+            return this.getPreviewPath()
+        }
+    },
     components: { MapComponent }
 }
 </script>