diff --git a/public/about/backend1.png b/public/about_images/backend1.png
similarity index 100%
rename from public/about/backend1.png
rename to public/about_images/backend1.png
diff --git a/public/about/backend2.png b/public/about_images/backend2.png
similarity index 100%
rename from public/about/backend2.png
rename to public/about_images/backend2.png
diff --git a/public/about/backend3.png b/public/about_images/backend3.png
similarity index 100%
rename from public/about/backend3.png
rename to public/about_images/backend3.png
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index 05f9eeb..6a8a7f0 100644
--- 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) {