fix(图片展示): 调整图片的引入方式

src/views/TopList/TopList.vue

@@ -6,7 +6,7 @@
 
       <!-- 帮助按钮 -->
       <img
-        src="/src/assets/images/TopList/help.png"
+        :src="images.help"
         alt=""
         style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
         @click="helpInfoShow = true"
@@ -14,7 +14,7 @@
 
       <!-- history按钮 -->
       <img
-        src="/src/assets/images/TopList/history.png"
+        :src="images.history"
         alt=""
         style="width: 20%; margin-top: 20px"
         @click="historyShow = true"
@@ -23,7 +23,7 @@
       <!-- 每周榜首 -->
       <div style="display: flex; flex-direction: column; align-items: center">
         <!-- 主标题 -->
-        <img src="/src/assets/images/TopList/listTitle.png" alt="" style="width: 90%" />
+        <img :src="images.listTitle" alt="" style="width: 90%" />
         <!-- 榜首 -->
         <div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px">
           <div style="width: 40%" v-for="(topUser, index) in listTop" :key="index">
@@ -94,12 +94,7 @@
       <div style="display: flex; justify-content: center; margin-top: 20px">
         <!-- 天数 -->
         <div style="width: 10%; position: relative; margin-right: 10px">
-          <img
-            src="/src/assets/images/TopList/dayBg.png"
-            alt=""
-            width="100%"
-            style="display: block"
-          />
+          <img :src="images.dayBg" alt="" width="100%" style="display: block" />
           <div
             style="
               position: absolute;
@@ -117,12 +112,7 @@
 
         <!-- 当天时间倒计时 -->
         <div style="width: 23.75%; position: relative">
-          <img
-            src="/src/assets/images/TopList/timeBg.png"
-            alt=""
-            width="100%"
-            style="display: block"
-          />
+          <img :src="images.timeBg" alt="" width="100%" style="display: block" />
           <div
             style="
               position: absolute;
@@ -144,18 +134,13 @@
 
       <!-- rewards -->
       <div style="display: flex; justify-content: flex-end; margin-top: -8%">
-        <img
-          src="/src/assets/images/TopList/rewards.png"
-          alt=""
-          style="width: 20%"
-          @click="rewardsShow = true"
-        />
+        <img :src="images.rewards" alt="" style="width: 20%" @click="rewardsShow = true" />
       </div>
 
       <!-- 每周礼物 -->
       <div style="display: flex; justify-content: center">
         <div style="width: 100%; position: relative">
-          <img src="/src/assets/images/TopList/eventGifts.png" alt="" style="width: 100%" />
+          <img :src="images.eventGifts" alt="" style="width: 100%" />
           <div
             style="
               position: absolute;
@@ -175,7 +160,7 @@
                 style="width: 30%; display: flex; flex-direction: column"
               >
                 <div style="position: relative">
-                  <img style="" src="/src/assets/images/TopList/gift.png" alt="" width="100%" />
+                  <img style="" :src="images.gift" alt="" width="100%" />
                   <div
                     style="
                       position: absolute;
@@ -215,26 +200,16 @@
             v-if="visibleKingList"
             style="width: 100%; display: flex; justify-content: space-around"
           >
-            <img src="/src/assets/images/TopList/kingBtActive.png" alt="" style="width: 40%" />
-            <img
-              src="/src/assets/images/TopList/queenBt.png"
-              alt=""
-              style="width: 40%"
-              @click="visibleKingList = false"
-            />
+            <img :src="images.kingBtActive" alt="" style="width: 40%" />
+            <img :src="images.queenBt" alt="" style="width: 40%" @click="visibleKingList = false" />
           </div>
 
           <div
             v-if="!visibleKingList"
             style="width: 100%; display: flex; justify-content: space-around"
           >
-            <img
-              src="/src/assets/images/TopList/kingBt.png"
-              alt=""
-              style="width: 40%"
-              @click="visibleKingList = true"
-            />
-            <img src="/src/assets/images/TopList/queenBtActive.png" alt="" style="width: 40%" />
+            <img :src="images.kingBt" alt="" style="width: 40%" @click="visibleKingList = true" />
+            <img :src="images.queenBtActive" alt="" style="width: 40%" />
           </div>
         </div>
 
@@ -246,11 +221,7 @@
               v-for="(listItem, index) in topList"
               :key="index"
             >
-              <img
-                src="/src/assets/images/TopList/border-item-user.png"
-                alt=""
-                style="width: 100%; display: block"
-              />
+              <img :src="images['border-item-user']" alt="" style="width: 100%; display: block" />
               <div
                 style="
                   position: absolute;
@@ -332,7 +303,7 @@
     <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
       <!-- help弹窗 -->
       <div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
-        <img src="/src/assets/images/TopList/helpInfo.png" alt="" style="width: 100%" />
+        <img :src="images.helpInfo" alt="" style="width: 100%" />
       </div>
 
       <!-- history弹窗 -->
@@ -341,12 +312,12 @@
           <borderImg title="History">
             <div
               style="
-                background-image: url(/src/assets/images/TopList/border-item.png);
                 background-size: 100% 100%;
                 min-height: 20px;
                 margin: -10px 0;
                 padding: 10px 10%;
               "
+              :style="{ backgroundImage: `url(${images['border-item']})` }"
             >
               <!-- 内容 -->
               <div
@@ -435,7 +406,7 @@
                 "
               >
                 <img
-                  src="/src/assets/images/TopList/timeBack.png"
+                  :src="images.timeBack"
                   alt=""
                   width="18px"
                   height="18px"
@@ -459,7 +430,7 @@
                   {{ showTopOne.group }}
                 </div>
                 <img
-                  src="/src/assets/images/TopList/timeNext.png"
+                  :src="images.timeNext"
                   alt=""
                   width="18px"
                   height="18px"
@@ -476,7 +447,7 @@
         <div style="position: relative">
           <!-- 取消按钮 -->
           <img
-            src="/src/assets/images/TopList/cancel.png"
+            :src="images.cancel"
             alt=""
             style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
             @click="closedPopup"
@@ -485,12 +456,12 @@
             <borderImg title="Rewards">
               <div
                 style="
-                  background-image: url(/src/assets/images/TopList/border-item.png);
                   background-size: 100% 100%;
                   min-height: 20px;
                   margin: -10px 0;
                   padding: 10px 10%;
                 "
+                :style="{ backgroundImage: `url(${images['border-item']})` }"
               >
                 <!-- 奖励榜切换按钮 -->
                 <div style="width: 100%">
@@ -498,13 +469,9 @@
                     v-if="visibleKingRewards"
                     style="width: 100%; display: flex; justify-content: space-around"
                   >
+                    <img :src="images.kingBtActive" alt="" style="width: 40%" />
                     <img
-                      src="/src/assets/images/TopList/kingBtActive.png"
-                      alt=""
-                      style="width: 40%"
-                    />
-                    <img
-                      src="/src/assets/images/TopList/queenBt.png"
+                      :src="images.queenBt"
                       alt=""
                       style="width: 40%"
                       @click="visibleKingRewards = false"
@@ -515,16 +482,12 @@
                     style="width: 100%; display: flex; justify-content: space-around"
                   >
                     <img
-                      src="/src/assets/images/TopList/kingBt.png"
+                      :src="images.kingBt"
                       alt=""
                       style="width: 40%"
                       @click="visibleKingRewards = true"
                     />
-                    <img
-                      src="/src/assets/images/TopList/queenBtActive.png"
-                      alt=""
-                      style="width: 40%"
-                    />
+                    <img :src="images.queenBtActive" alt="" style="width: 40%" />
                   </div>
                 </div>
 
@@ -553,12 +516,7 @@
                         style="width: 100%"
                       >
                         <div style="position: relative">
-                          <img
-                            style=""
-                            src="/src/assets/images/TopList/gift.png"
-                            alt=""
-                            width="100%"
-                          />
+                          <img :src="images.gift" style="" alt="" width="100%" />
                           <div
                             style="
                               position: absolute;
@@ -608,11 +566,7 @@
         margin-top: 10px;
       "
     >
-      <img
-        src="/src/assets/images/TopList/myRankingBg.png"
-        alt=""
-        style="width: calc(100% - 1px); display: block"
-      />
+      <img :src="images.myRankingBg" alt="" style="width: calc(100% - 1px); display: block" />
 
       <div
         style="
@@ -686,6 +640,15 @@ import {
   getHistoryTopOne,
 } from '@/api/topList.js'
 import { useDebounce, useThrottle } from '@/utils/useDebounce'
+//vite动态批量导入图片
+const imageModules = import.meta.glob('@/assets/images/TopList/*.{png,jpg,svg}', { eager: true })
+// 生成文件名映射对象（自动移除路径和扩展名）
+const images = Object.fromEntries(
+  Object.entries(imageModules).map(([path, module]) => {
+    const fileName = path.split('/').pop().split('.')[0]
+    return [fileName, module.default]
+  })
+)
 
 const visibleKingList = ref(true)
 
@@ -698,12 +661,12 @@ const showTopOne = computed(() => {
     top: [
       {
         type: 'topKing',
-        Frame: '/src/assets/images/TopList/kingFrame.png',
+        Frame: images.kingFrame,
         userInfo: historyList.value[historyIndex.value].wealth,
       },
       {
         type: 'topQueen',
-        Frame: '/src/assets/images/TopList/queenFrame.png',
+        Frame: images.queenFrame,
         userInfo: historyList.value[historyIndex.value].charm,
       },
     ],
@@ -739,12 +702,12 @@ const queenList = ref([]) // 女王榜
 const listTop = ref([
   {
     type: 'topKing',
-    Frame: '/src/assets/images/TopList/kingFrame.png',
+    Frame: images.kingFrame,
     userInfo: {},
   },
   {
     type: 'topQueen',
-    Frame: '/src/assets/images/TopList/queenFrame.png',
+    Frame: images.queenFrame,
     userInfo: {},
   },
 ]) //本周的top1国王和女王
@@ -757,11 +720,7 @@ const topList = computed(() => {
 const showKingLoading = ref(true) //触底加载功能
 const showQueenLoading = ref(true) //触底加载功能
 
-const topImg = ref([
-  '/src/assets/images/TopList/top1.png',
-  '/src/assets/images/TopList/top2.png',
-  '/src/assets/images/TopList/top3.png',
-]) // top图片
+const topImg = ref([images.top1, images.top2, images.top3]) // top图片
 
 const visibleKingRewards = ref(true) // 展示奖励榜标签
 const kingRewards = ref([]) //国王奖励列表
@@ -955,7 +914,7 @@ onUnmounted(() => {
 
 .bg {
   width: 100vw;
-  background-image: url(../../assets/images/TopList/bg.png);
+  background-image: url('@/assets/images/TopList/bg.png');
   background-size: 100% auto;
   background-repeat: no-repeat;
   position: relative;