images

package-lock.json

@@ -8,6 +8,7 @@
       "name": "myapp",
       "version": "0.0.0",
       "dependencies": {
+        "dotenv": "^16.4.5",
         "lottie-vuejs": "^0.4.0",
         "vite-svg-loader": "^5.1.0",
         "vue": "^3.4.21",
@@ -1604,6 +1605,17 @@
         "domelementtype": "1"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "dotenv": "^16.4.5",
     "lottie-vuejs": "^0.4.0",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.21",

src/components/GridSkill.vue

@@ -41,12 +41,13 @@ const skills = [
     alt: "communication icon"
   }
 ];
+const url = import.meta.env.BASE_URL;
 </script>
 
 <template>
   <div class="grid gap-5 xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 grid-cols-1">
     <SkillCell v-for="(skill, index) in skills" :key="index" :title="skill.title" :text="skill.text" class="group">
-      <img :src="`/images/${ skill.image}`" :height="60" :width="60"
+      <img :src="`${url}images/${ skill.image}`" :height="60" :width="60"
            class="h-7 w-7 group-hover:scale-110 transition-all ease-in duration-500 group-hover:brightness-200"
            :alt="skill.alt">
     </SkillCell>

vite.config.js

@@ -1,8 +1,10 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import svgLoader from 'vite-svg-loader'
+import { fileURLToPath, URL } from 'node:url'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), svgLoader()],
+  base: '/',
 })