fix: 图片失效修复

DavidKitano · Apr 11, 2024 · 9a9b9cf · 9a9b9cf
1 parent 5eb8958
commit 9a9b9cf
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 17 deletions.
diff --git a/public/about/backend1.png → public/about_images/backend1.png b/public/about/backend1.png → public/about_images/backend1.png
diff --git a/public/about/backend2.png → public/about_images/backend2.png b/public/about/backend2.png → public/about_images/backend2.png
diff --git a/public/about/backend3.png → public/about_images/backend3.png b/public/about/backend3.png → public/about_images/backend3.png
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
@@ -58,23 +58,11 @@
           <h1 align="center">该项目后端部分使用以下技术栈进行开发</h1>
           <el-image
             style="width: 33.3333%"
-            :src="backendImages[0]"
+            v-for="(image, index) in backendImages"
+            :key="image"
+            :src="image"
             :preview-src-list="backendImages"
-            :initial-index="0"
-            loading="lazy"
-          />
-          <el-image
-            style="width: 33.3333%"
-            :src="backendImages[1]"
-            :preview-src-list="backendImages"
-            :initial-index="1"
-            loading="lazy"
-          />
-          <el-image
-            style="width: 33.3333%"
-            :src="backendImages[2]"
-            :preview-src-list="backendImages"
-            :initial-index="2"
+            :initial-index="index"
             loading="lazy"
           />
         </el-tab-pane>
@@ -84,7 +72,7 @@
 </template>
 <script setup lang="ts">
 const currentTab = ref('front')
-const backendImages = ['/about/backend1.png', '/about/backend2.png', '/about/backend3.png']
+const backendImages = ['/about_images/backend1.png', '/about_images/backend2.png', '/about_images/backend3.png']
 </script>
 <style lang="scss" scoped>
 @media (min-width: 1024px) {