fix: vehicle thumbnail names

src/components/Global/VehicleThumbnail.vue

@@ -5,26 +5,28 @@
       <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
     </div>
 
-    <img
-      :src="`https://static.spythere.eu/thumbnails/v2/${imgName}.png`"
-      height="60"
-      loading="lazy"
-      data-tooltip-type="VehiclePreviewTooltip"
-      :data-tooltip-content="vehicleString"
-      @error="onImageError"
-      @load="onImageLoad"
-    />
+    <div class="stock-images">
+      <img
+        v-for="(thumbnailImage, imageIndex) in images"
+        :src="`https://static.spythere.eu/thumbnails/v2/${thumbnailImage}.png`"
+        height="60"
+        loading="lazy"
+        data-tooltip-type="VehiclePreviewTooltip"
+        :data-tooltip-content="vehicleString"
+        @error="onImageError($event, imageFallbacks[imageIndex])"
+        @load="onImageLoad"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, Ref, ref } from 'vue';
+import { computed, PropType, Ref, ref } from 'vue';
 
 const props = defineProps({
   vehicleString: { type: String, required: true },
-  imgName: { type: String, required: true },
-  fallbackName: { type: String, required: true },
-  placeholderName: String
+  images: { type: Object as PropType<string[]>, required: true },
+  imageFallbacks: { type: Object as PropType<string[]>, required: true }
 });
 
 const thumbRef = ref(null) as Ref<HTMLElement | null>;
@@ -33,8 +35,8 @@ const imgStatus = ref('loading');
 const vehicleName = computed(() => props.vehicleString.split(':')[0].replace(/_/g, ' '));
 const vehicleCargo = computed(() => props.vehicleString.split(':')[1]);
 
-function onImageError(event: Event) {
-  (event.target as HTMLImageElement).src = `/images/${props.fallbackName}.png`;
+function onImageError(event: Event, fallbackImage: string) {
+  (event.target as HTMLImageElement).src = `/images/${fallbackImage}.png`;
   imgStatus.value = 'error';
 }
 
@@ -49,6 +51,7 @@ function onImageLoad() {
 
 <style lang="scss" scoped>
 .vehicle-thumbnail {
+  
   position: relative;
   opacity: 0;
   transition: opacity 100ms ease-in-out;
@@ -66,4 +69,13 @@ function onImageLoad() {
   margin-bottom: 0.25em;
   padding: 0.25em 0;
 }
+
+.stock-images {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  cursor: crosshair;
+
+  padding: 0.5em 0;
+}
 </style>