bugfix: picture rendering

.github/workflows/deploy.yml

@@ -28,6 +28,8 @@ jobs:
           npm run build
       - name: Setup Pages
         uses: actions/configure-pages@v3
+      - run: |
+        cp ./dist/index.html ./dist/404.html
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:

README.md

@@ -1,7 +1,10 @@
 ```
 npm install
+
 npm run dev
+
 npm run build
+npm run preview
 ```
 
 See [Configuration Reference](https://vitejs.dev/config/).

src/views/Team.vue

@@ -1,20 +1,20 @@
 <template>
     <v-row>
         <v-col cols="3">
-            <v-list density="compact" v-model:selected="active_id">
+            <v-list density="compact" v-model:selected="active_id" mandatory>
                 <v-list-subheader>
                     <h2>Team</h2>
                 </v-list-subheader>
-                <v-list-item variant="plain" v-for="i in people.length" :key="i - 1" :title="people[i - 1].name" :value="i - 1"
-                    color="primary">
+                <v-list-item variant="plain" v-for="i in people.length" :key="i - 1" :title="people[i - 1].name"
+                    :value="i - 1" color="primary">
                 </v-list-item>
             </v-list>
         </v-col>
 
         <v-col class="mt-8">
             <v-row>
                 <v-col cols="3">
-                    <v-img :src="active_person.imgUrl"></v-img>
+                    <v-img :src="active_imgUrl"></v-img>
                 </v-col>
                 <v-col>
                     <h3>{{ active_person.position }}</h3>
@@ -24,7 +24,6 @@
                     <p class="ubuntu mt-2 text-justify">{{ active_person.description }}</p>
                 </v-col>
             </v-row>
-
         </v-col>
     </v-row>
 </template>
@@ -33,7 +32,16 @@
 export default {
     computed: {
         active_person() {
-            return this.people[this.active_id[0]]
+            const result = this.people[this.active_id[0]]
+            if (typeof (result.imgUrl) != "string") {
+                result.imgUrl().then(module => {
+                    result.imgUrl = module.default
+                })
+            }
+            return result
+        },
+        active_imgUrl() {
+            return typeof (this.active_person.imgUrl) == 'string' ? this.active_person.imgUrl : ''
         }
     },
     data() {
@@ -43,35 +51,35 @@ export default {
                 {
                     name: "LEE Kuan Jin",
                     position: "group leader",
-                    imgUrl: "src/assets/LKJ.webp",
+                    imgUrl: () => import("@/assets/LKJ.webp"),
                     email: "[email protected]",
                     description: "Dr. Lee obtained his PhD in Magnetic Resonance Imaging from the University of Sheffield in 2003. He did postdoctoral research at the Academic Unit of Radiology at the University of Sheffield, and then in Jürgen Hennig's Magnetic Resonance laboratory at the University Medical Center, Freiburg.Dr Lee worked at Siemens Healthcare before establishing MRMD in 2014."
                 },
                 {
                     name: "TEO Xing Qi",
                     position: "Senior Research Officer",
-                    imgUrl: "src/assets/TXQ.webp",
+                    imgUrl: () => import("@/assets/TXQ.webp"),
                     email: "[email protected]",
                     description: "todo"
                 },
                 {
                     name: "Isaac HUEN",
                     position: "Senior Scientist",
-                    imgUrl: "src/assets/LKJ.webp",
+                    imgUrl: () => import("@/assets/LKJ.webp"),
                     email: "[email protected]",
                     description: "todo"
                 },
                 {
                     name: "FENG Haosheng",
                     position: "Research Officer",
-                    imgUrl: "src/assets/FHS.webp",
+                    imgUrl: () => import("@/assets/FHS.webp"),
                     email: "[email protected]",
                     description: "Haosheng graduated from Southern University of Science and Technology as a Biomedical Engineering bachelor in 2022. As the youngest member in the team, Haosheng has been learning MRI theory, experiments and best practices from his friendly colleagues diligently. His contribution in software engineering is also appreciated by the team."
                 },
                 {
                     name: "Paul CASSIDY",
                     position: "Principal Scientist ",
-                    imgUrl: "src/assets/Paul.webp",
+                    imgUrl: () => import("@/assets/Paul.webp"),
                     email: "[email protected]",
                     description: "todo"
                 },