fix image loading with vite

src/components/Cards/EmptyState.vue

@@ -1,15 +1,15 @@
 <template>
   <v-card flat class="mt-10 d-flex flex-column align-center justify-center transparent">
-    <v-img :src="imageName" max-height="300" contain></v-img>
+    <v-img :src="$vuetify.theme.isDark ? emptyStateDarkImage : emptyStateLightImage" max-height="300" contain></v-img>
     <span class="display-1 font-weight-light text--disabled">{{ title }}</span>
     <span v-if="!hasDescriptionSlot" class="body-1 font-weight-light text--secondary mt-1">{{ text }}</span>
     <slot v-else name="description" />
   </v-card>
 </template>
 
 <script>
-// var images = require.context('@/assets/', false, /\.png$/)
-import images from "@/assets/*.png";
+import emptyStateDarkImage from '@/assets/empty_state_dark.png'
+import emptyStateLightImage from '@/assets/empty_state_light.png'
 
 export default {
   name: "EmptyState",
@@ -18,14 +18,16 @@ export default {
     text: String,
     htmlText: String
   },
+  data() {
+    return {
+      emptyStateDarkImage, 
+      emptyStateLightImage
+    }
+  },
   computed: {
     hasDescriptionSlot() {
       return !!this.$slots.description;
     },
-    imageName() {
-      if (this.$vuetify.theme.isDark) return images('./empty_state_dark.png');
-      return images('./empty_state_light.png');
-    }
   }
 }
 </script>

src/views/extended_search/StartSearchState.vue

@@ -1,24 +1,22 @@
 <template>
   <v-card flat class="mt-10 pa-10 d-flex flex-column align-center justify-center transparent">
-    <v-img :src="imagePath" max-height="400" contain></v-img>
+    <v-img :src="$vuetify.theme.isDark ? startSearchDarkImage : startSearchLightImage" max-height="400" contain></v-img>
     <span class="display-1 font-weight-light text--disabled">Let's search</span>
     <span class="body-1 font-weight-light text--secondary mt-1">Please enter something to start your search in Better Call Dev</span>
   </v-card>
 </template>
 
 <script>
-// let images = require.context('@/assets/', false, /\.png$/)
-import images from "@/assets/*.png";
+import startSearchDarkImage from '@/assets/start_search_dark.png'
+import startSearchLightImage from '@/assets/start_search.png'
 
 export default {
   name: "StartSearchState",
-  computed: {
-    imagePath() {
-      if (this.$vuetify.theme.isDark) {
-        return images('./start_search_dark.png');
-      }
-      return images('./start_search.png');
+  data() {
+    return {
+      startSearchDarkImage, 
+      startSearchLightImage
     }
-  }
+  },
 }
 </script>