chore: added functionality for not found vehicle images

src/components/sections/TrainImageSection.vue

@@ -4,7 +4,7 @@
       <div class="image-wrapper">
         <img
           :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
-          :data-preview-active="store.chosenVehicle !== null"
+          :data-preview-available="isDataPreviewAvailable"
           :data-sponsor-only="
             store.chosenVehicle.sponsorOnlyTimestamp &&
             store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
@@ -111,30 +111,41 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    isDataPreviewAvailable() {
+      return this.imageStatus == 'loaded' && this.store.chosenVehicle != null;
+    },
+  },
+
   methods: {
     isTractionUnit,
 
     onImageError(e: Event) {
       const el = e.target as HTMLImageElement;
-      if (el.src == '/images/placeholder.jpg') return;
+      if (el.src == '/images/no-vehicle-image.png') return;
 
-      el.src = '/images/placeholder.jpg';
+      el.src = '/images/no-vehicle-image.png';
       this.imageStatus = 'error';
     },
 
     onImageLoad(e: Event) {
+      if (this.imageStatus == 'error') return;
+
       this.imageStatus = 'loaded';
     },
 
     onImageClick(e: Event) {
-      const target = e.target as HTMLElement;
+      const target = e.target as HTMLImageElement;
 
       const chosenVehicle = this.store.chosenVehicle;
 
       if (!chosenVehicle) return;
 
       this.store.lastFocusedElement = target;
-      this.store.vehiclePreviewSrc = this.getThumbnailURL(chosenVehicle.type, 'large');
+
+      if (this.isDataPreviewAvailable) {
+        this.store.vehiclePreviewSrc = this.getThumbnailURL(chosenVehicle.type, 'large');
+      }
     },
   },
 });
@@ -161,7 +172,7 @@ export default defineComponent({
 img {
   width: 100%;
 
-  &[data-preview-active='true'] {
+  &[data-preview-available='true'] {
     border: 1px solid white;
     cursor: zoom-in;
   }

src/components/tabs/WikiListTab.vue

@@ -60,7 +60,12 @@
           @keydown.enter="onVehicleSelect(vehicle)"
           tabindex="0"
         >
-          <img loading="lazy" width="120" :src="getThumbnailURL(vehicle.type, 'small')" />
+          <img
+            loading="lazy"
+            width="120"
+            :src="getThumbnailURL(vehicle.type, 'small')"
+            @error="onThumbnailImageError"
+          />
 
           <span>
             <span
@@ -163,6 +168,13 @@ export default defineComponent({
   methods: {
     isTractionUnit,
 
+    onThumbnailImageError(e: Event) {
+      const el = e.target as HTMLImageElement;
+      
+      if (el.src == '/images/no-vehicle-image.png') return;
+      el.src = '/images/no-vehicle-image.png';
+    },
+
     onVehicleSelect(vehicle: IVehicle) {
       if (this.store.chosenVehicle?.type === vehicle.type) this.addVehicle(vehicle);
       this.previewVehicle(vehicle);

src/components/utils/ImageFullscreenPreview.vue

@@ -5,7 +5,7 @@
     @keydown.esc="store.vehiclePreviewSrc = ''"
     tabindex="0"
   >
-    <img :src="store.vehiclePreviewSrc" alt="preview" />
+    <img :src="store.vehiclePreviewSrc" alt="preview" @error="onImageError" />
   </div>
 </template>
 
@@ -23,6 +23,14 @@ export default defineComponent({
   mounted() {
     this.$el.focus();
   },
+
+  methods: {
+    onImageError(event: Event) {
+      if(!event.target || !(event.target instanceof HTMLImageElement)) return
+
+      event.target.src = '/images/no-vehicle-image.png';
+    },
+  },
 });
 </script>