From 5aa556bd7f862ec610222a20f7db08bb2c4f390b Mon Sep 17 00:00:00 2001
From: YSZL <11812220@mail.sustech.edu.cn>
Date: Mon, 11 Dec 2023 15:35:54 +0800
Subject: [PATCH] bugfix: picture rendering

---
 .github/workflows/deploy.yml |  2 ++
 README.md                    |  3 +++
 src/views/Team.vue           | 30 +++++++++++++++++++-----------
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 8311c28..4eaebb5 100644
--- a/.github/workflows/deploy.yml
+++ b/.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:
diff --git a/README.md b/README.md
index a8260f9..901389b 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,10 @@
 ```
 npm install
+
 npm run dev
+
 npm run build
+npm run preview
 ```
 
 See [Configuration Reference](https://vitejs.dev/config/).
diff --git a/src/views/Team.vue b/src/views/Team.vue
index 6bdbeec..892fb9d 100644
--- a/src/views/Team.vue
+++ b/src/views/Team.vue
@@ -1,12 +1,12 @@
 <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>
@@ -14,7 +14,7 @@
         <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: "lee_kuan_jin@imcb.a-star.edu.sg",
                     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: "teo_xing_qi@imcb.a-star.edu.sg",
                     description: "todo"
                 },
                 {
                     name: "Isaac HUEN",
                     position: "Senior Scientist",
-                    imgUrl: "src/assets/LKJ.webp",
+                    imgUrl: () => import("@/assets/LKJ.webp"),
                     email: "isaac_huen@imcb.a-star.edu.sg",
                     description: "todo"
                 },
                 {
                     name: "FENG Haosheng",
                     position: "Research Officer",
-                    imgUrl: "src/assets/FHS.webp",
+                    imgUrl: () => import("@/assets/FHS.webp"),
                     email: "feng_haosheng@imcb.a-star.edu.sg",
                     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: "paul_cassidy@imcb.a-star.edu.sg",
                     description: "todo"
                 },