latest fix for vite image importing

baking-bad · Nov 12, 2023 · b3bc033 · b3bc033
1 parent 8203069
commit b3bc033
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/src/components/Dialogs/APIRelocation.vue b/src/components/Dialogs/APIRelocation.vue
@@ -10,7 +10,7 @@
           </v-btn>
       </v-card-title>
       <v-card-text class="d-flex flex-column align-center justify-center">    
-          <v-img :src="imageName" max-height="300" contain></v-img>    
+          <v-img :src="$vuetify.theme.isDark ? apiRelocateDarkImage : apiRelocateLightImage" max-height="300" contain></v-img>    
           <div class="information font-weight-regular mt-2">
             <span>
               The BCD API is about to become non-public. This means that the API schema may change without notice and without maintaining backward compatibility. Please use the
@@ -29,19 +29,21 @@
 </template>
 
 <script>
-// var images = require.context('@/assets/', false, /\.png$/)
-import images from "@/assets/*.png";
+import apiRelocateDarkImage from '@/assets/api_relocate_dark.png'
+import apiRelocateLightImage from '@/assets/api_relocate_light.png'
 
 export default {
   name: "APIRelocation",
   props: {
     value: Boolean
   },
+  data() {
+    return {
+      apiRelocateDarkImage, 
+      apiRelocateLightImage
+    }
+  },
   computed: {
-    imageName() {
-      if (this.$vuetify.theme.isDark) return images('./api_relocate_dark.png');
-      return images('./api_relocate_light.png');
-    },
     show: {
       get() {
         return this.value;

diff --git a/src/components/ErrorState.vue b/src/components/ErrorState.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ml-8 pl-8 flex-column d-flex align-center justify-center">
       <v-img
-        :src="imageName"
+        :src="$vuetify.theme.isDark ? errorStateDarkImage : errorStateLightImage"
         contain
         max-height="300px"
       ></v-img>
@@ -26,15 +26,17 @@
 </template>
 
 <script>
-// var images = require.context('@/assets/', false, /\.png$/)
-import images from "@/assets/*.png";
+import errorStateDarkImage from '@/assets/error_state_dark.png'
+import errorStateLightImage from '@/assets/error_state_light.png'
 
 export default {
   name: "ErrorState",
   props: {
     code: Number,
   },
   data: () => ({
+    errorStateDarkImage,
+    errorStateLightImage,
     links: [
       {
         'href': 'https://github.com/baking-bad/bcd/issues',
@@ -57,12 +59,6 @@ export default {
         'icon': 'mdi-email'
       }
     ]
-  }),
-  computed: {
-    imageName() {
-      if (this.$vuetify.theme.isDark) return images('./error_state_dark.png');
-      return images('./error_state_light.png');
-    }
-  },
+  })
 };
 </script>