fix images source

src/App.vue

@@ -68,7 +68,10 @@
 
 <script setup>
 import { ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
+import banner1 from "@/assets/banner1.png";
+import banner4 from "@/assets/banner4.png";
+import banner3 from "@/assets/banner3.png";
 
 const router = useRouter();
 
@@ -82,19 +85,19 @@ const pages = ref([
         label: "ATA-GUI",
         path: "/projects/ata-gui",
         index: "0",
-        img: "/assets/banner1.png",
+        img: banner1,
       },
       {
         label: "Ares",
         path: "/projects/ares",
         index: "1",
-        img: "/assets/banner4.png",
+        img: banner4,
       },
       {
         label: "ATA",
         path: "/projects/ata",
         index: "2",
-        img: "/assets/banner3.png",
+        img: banner3,
       },
     ],
   },

src/components/BaseHeader.vue

@@ -7,7 +7,7 @@
     @select="handleSelect"
   >
     <el-menu-item :index="'0'">
-      <img style="width: 30px" src="../assets/favicon.png" alt="Element logo" />
+      <img style="width: 30px" :src="favicon" alt="Element logo" />
     </el-menu-item>
     <div class="flex-grow" />
     <el-sub-menu v-for="page in ps_i" :index="page.index" :key="page.index">
@@ -38,6 +38,7 @@
 import { ref } from "vue";
 import { toggleDark, isDark } from "~/composables";
 import { Moon, Sunny } from "@element-plus/icons-vue";
+import favicon from "@/assets/favicon.png";
 
 const props = defineProps({
   pages: Array,

src/components/CommonProject.vue

@@ -84,8 +84,6 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
-
 const props = defineProps({
   projectData: {
     banner: String,

src/router/index.js

@@ -1,4 +1,4 @@
-import { createMemoryHistory, createRouter } from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 
 import Home from "../views/Home.vue";
 import Contact from "../views/Contact.vue";
@@ -15,7 +15,7 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createMemoryHistory(),
+  history: createWebHistory(),
   routes,
 });
 

src/views/Home.vue

@@ -7,7 +7,7 @@
         </el-row>
         <el-row>
           <el-col :span="8">
-            <el-image class="profile-image" src="/assets/p_picture.jpg" lazy />
+            <el-image class="profile-image" :src="p_picture" lazy />
           </el-col>
           <el-col :span="1"></el-col>
           <el-col :span="15">
@@ -75,6 +75,11 @@
 </template>
 
 <script setup>
+import its from "@/assets/company/its.jpg";
+import nextage from "@/assets/company/nextage.jpg";
+import uoc from "@/assets/company/uoc.jpg";
+import p_picture from "@/assets/p_picture.jpg";
+
 const props = defineProps({
   projects: Array,
 });
@@ -86,15 +91,15 @@ const ew_list = [
       "Bachelor's degree in Techniques for Software Application Development",
     description:
       "Bachelor's Degree in Techniques for Software Development, equipped me with the skills to create usable, efficient, and error-free software for various applications. I manage the software creation process through all stages of its life cycle, from requirement definition and design to implementation, maintenance, and upgrades. I excel in communicating and collaborating within development teams, employing agile methods to achieve functionality, quality, and timely delivery. My expertise includes a thorough understanding of the programming languages, tools, and technologies essential for building software across different platforms. Additionally, I am proficient in administering systems, networks, and applications, both locally and in the cloud.",
-    logo: "/assets/company/uoc.jpg",
+    logo: uoc,
     date: "Feb 2022 - Feb 2025",
   },
   {
     company_name: "Nextage S.R.L.",
     course_name: "Mobile Android Developer · Intership",
     description:
       "As a Mobile Android Developer in the medical area, I was responsible for designing and developing mobile applications for the Android ecosystem. My role involved working closely with cross-functional teams to create user-friendly and efficient apps that met the needs of healthcare professionals. I utilized my knowledge of Kotlin, Java and experience with third-party libraries and APIs to create robust and high-performing applications. I also contributed to the testing, releasing, and support of these applications to ensure their continued success. During my time in this position, I gained valuable experience working in the healthcare industry.",
-    logo: "/assets/company/nextage.jpg",
+    logo: nextage,
     date: "Apr 2021 - Dec 2021",
   },
   {
@@ -103,7 +108,7 @@ const ew_list = [
     course_name: "Development of software systems for industry 4.0",
     description:
       "As a highly technological professional, I specialize in analyzing, designing, developing, and managing software and hardware systems to support Industry 4.0. My training includes comprehensive technical and design skills, covering all phases of the process from client briefings and programming activities to testing and release. Additionally, I am adept at implementing application security and data protection, ensuring robust management and safeguarding of data.",
-    logo: "/assets/company/its.jpg",
+    logo: its,
     date: "2019 - 2021",
   },
 ];

src/views/projects/ATA-GUI.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup>
+import b from "@/assets/banner1.png";
+
 const project = {
-  banner: "/assets/banner1.png",
+  banner: b,
   images: [],
   buttons: [
     {

src/views/projects/ATA.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup>
+import b from "@/assets/banner3.png";
+
 const project = {
-  banner: "/assets/banner4.png",
+  banner: b,
   images: [],
   buttons: [
     {

src/views/projects/Ares.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script setup>
+import b from "@/assets/banner4.png";
+
 const project = {
-  banner: "/assets/banner4.png",
+  banner: b,
   images: [],
   buttons: [
     {

vite.config.mts

@@ -1,26 +1,27 @@
-import path from 'path'
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import path from "path";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import Components from "unplugin-vue-components/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 
-import Unocss from 'unocss/vite'
+import Unocss from "unocss/vite";
 import {
   presetAttributify,
   presetIcons,
   presetUno,
   transformerDirectives,
   transformerVariantGroup,
-} from 'unocss'
+} from "unocss";
 
-const pathSrc = path.resolve(__dirname, 'src')
+const pathSrc = path.resolve(__dirname, "src");
 
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
     alias: {
-      '~/': `${pathSrc}/`,
+      "~/": `${pathSrc}/`,
+      "@": path.resolve(__dirname, "src"),
     },
   },
   css: {
@@ -34,15 +35,15 @@ export default defineConfig({
     vue(),
     Components({
       // allow auto load markdown components under `./src/components/`
-      extensions: ['vue', 'md'],
+      extensions: ["vue", "md"],
       // allow auto import and register components used in markdown
       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
       resolvers: [
         ElementPlusResolver({
-          importStyle: 'sass',
+          importStyle: "sass",
         }),
       ],
-      dts: 'src/components.d.ts',
+      dts: "src/components.d.ts",
     }),
 
     // https://github.com/antfu/unocss
@@ -56,10 +57,7 @@ export default defineConfig({
           warn: true,
         }),
       ],
-      transformers: [
-        transformerDirectives(),
-        transformerVariantGroup(),
-      ]
+      transformers: [transformerDirectives(), transformerVariantGroup()],
     }),
   ],
-})
+});