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

src/views/WeeklyStar/WeeklyStar.vue

@@ -5,7 +5,7 @@
 
     <!-- 帮助按钮 -->
     <img
-      src="/src/assets/images/WeeklyStar/help.png"
+      :src="images.help"
       alt=""
       style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
       @click="helpInfoShow = true"
@@ -13,7 +13,7 @@
 
     <!-- history按钮 -->
     <img
-      src="/src/assets/images/WeeklyStar/history.png"
+      :src="images.history"
       alt=""
       style="width: 20%; margin-top: 20px"
       @click="historyShow = true"
@@ -28,36 +28,31 @@
           : 'calc(65vw - 10vw - 10vw - 20px)',
       }"
     >
-      <img
-        src="/src/assets/images/WeeklyStar/gifts.png"
-        alt=""
-        style="width: 20%"
-        @click="giftsShow = true"
-      />
+      <img :src="images.gifts" alt="" style="width: 20%" @click="giftsShow = true" />
     </div>
 
     <!-- 倒计时 -->
     <div style="display: flex; justify-content: center; margin-top: -10%">
       <div style="width: 15%">
-        <itemCenter imgUrl="/src/assets/images/WeeklyStar/dayBg.png">
+        <itemCenter :imgUrl="images.dayBg">
           <div class="timeText">{{ Days }}D</div>
         </itemCenter>
       </div>
       <div class="timeText timeGap" style="width: 6px"></div>
       <div style="width: 15%">
-        <itemCenter imgUrl="/src/assets/images/WeeklyStar/hourAndMinBg.png">
+        <itemCenter :imgUrl="images.hourAndMinBg">
           <div class="timeText">{{ Hours }}</div>
         </itemCenter>
       </div>
       <div class="timeText timeGap">:</div>
       <div style="width: 15%">
-        <itemCenter imgUrl="/src/assets/images/WeeklyStar/hourAndMinBg.png">
+        <itemCenter :imgUrl="images.hourAndMinBg">
           <div class="timeText">{{ Minutes }}</div>
         </itemCenter>
       </div>
       <div class="timeText timeGap">:</div>
       <div style="width: 15%">
-        <itemCenter imgUrl="/src/assets/images/WeeklyStar/secBg.png">
+        <itemCenter :imgUrl="images.secBg">
           <div class="timeText">{{ Second }}</div>
         </itemCenter>
       </div>
@@ -66,35 +61,17 @@
     <!-- 切换按钮 -->
     <div style="margin: 22% 0 8% 0; display: flex; justify-content: space-around">
       <div style="width: 30%" @click="handleBt('Ranking')">
-        <itemCenter
-          :imgUrl="
-            rankingShow
-              ? '/src/assets/images/WeeklyStar/btActive.png'
-              : '/src/assets/images/WeeklyStar/btNoActive.png'
-          "
-        >
+        <itemCenter :imgUrl="rankingShow ? images.btActive : images.btNoActive">
           <div class="btTitle">Ranking</div>
         </itemCenter>
       </div>
       <div style="width: 30%" @click="handleBt('Rewards')">
-        <itemCenter
-          :imgUrl="
-            rewardShow
-              ? '/src/assets/images/WeeklyStar/btActive.png'
-              : '/src/assets/images/WeeklyStar/btNoActive.png'
-          "
-        >
+        <itemCenter :imgUrl="rewardShow ? images.btActive : images.btNoActive">
           <div class="btTitle">Rewards</div>
         </itemCenter>
       </div>
       <div style="width: 30%" @click="handleBt('Exchange')">
-        <itemCenter
-          :imgUrl="
-            exchargeShow
-              ? '/src/assets/images/WeeklyStar/btActive.png'
-              : '/src/assets/images/WeeklyStar/btNoActive.png'
-          "
-        >
+        <itemCenter :imgUrl="exchargeShow ? images.btActive : images.btNoActive">
           <div class="btTitle">Exchange</div>
         </itemCenter>
       </div>
@@ -109,14 +86,9 @@
       >
         <!-- 背景板 -->
         <div>
+          <img :src="images.RankingMain" alt="" width="100%" style="display: block" />
           <img
-            src="/src/assets/images/WeeklyStar/RankingMain.png"
-            alt=""
-            width="100%"
-            style="display: block"
-          />
-          <img
-            src="/src/assets/images/WeeklyStar/RankingItem.png"
+            :src="images.RankingItem"
             alt=""
             width="100%"
             style="display: block; margin-top: -2px"
@@ -124,7 +96,7 @@
             v-if="showRanking.length > 1"
           />
           <img
-            src="/src/assets/images/WeeklyStar/RankingBottomBorder.png"
+            :src="images.RankingBottomBorder"
             alt=""
             width="100%"
             style="display: block; margin-top: -12%"
@@ -138,7 +110,7 @@
             <!-- 第一 -->
             <div style="display: flex; justify-content: center">
               <TopUser
-                BorderImgUrl="/src/assets/images/WeeklyStar/topOne.png"
+                :BorderImgUrl="images.topOne"
                 :avatarUrl="RankingHasTop3[0].userAvatar"
                 :name="RankingHasTop3[0].userNickname"
                 :distributionValue="RankingHasTop3[0].quantity"
@@ -149,7 +121,7 @@
             <div style="display: flex; justify-content: space-between; margin-top: -20%">
               <TopUser
                 :isTopOne="false"
-                BorderImgUrl="/src/assets/images/WeeklyStar/topTwo.png"
+                :BorderImgUrl="images.topTwo"
                 :avatarUrl="RankingHasTop3[1].userAvatar"
                 :name="RankingHasTop3[1].userNickname"
                 :distributionValue="RankingHasTop3[1].quantity"
@@ -157,7 +129,7 @@
               />
               <TopUser
                 :isTopOne="false"
-                BorderImgUrl="/src/assets/images/WeeklyStar/topThree.png"
+                :BorderImgUrl="images.topThree"
                 :avatarUrl="RankingHasTop3[2].userAvatar"
                 :name="RankingHasTop3[2].userNickname"
                 :distributionValue="RankingHasTop3[2].quantity"
@@ -168,12 +140,7 @@
 
           <!-- 第四名开始 -->
           <div v-for="listItem in showRanking" style="margin-top: 2%; position: relative">
-            <img
-              src="/src/assets/images/WeeklyStar/itemUser.png"
-              alt=""
-              width="100%;"
-              style="display: block"
-            />
+            <img :src="images.itemUser" alt="" width="100%;" style="display: block" />
             <div
               style="
                 position: absolute;
@@ -241,11 +208,7 @@
         <!-- top模块 -->
         <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 90%">
           <!-- top背景图 -->
-          <img
-            src="/src/assets/images/WeeklyStar/topBg.png"
-            alt=""
-            style="width: 100%; display: block"
-          />
+          <img :src="images.topBg" alt="" style="width: 100%; display: block" />
           <!-- 标题 -->
           <div
             style="
@@ -291,11 +254,7 @@
                 "
               >
                 <!-- gift背景图 -->
-                <img
-                  src="/src/assets/images/WeeklyStar/giftItemBg.png"
-                  alt=""
-                  style="width: 90%; display: block"
-                />
+                <img :src="images.giftItemBg" alt="" style="width: 90%; display: block" />
                 <div
                   style="
                     position: absolute;
@@ -318,7 +277,7 @@
                 </div>
               </div>
               <div style="position: relative; width: 75%">
-                <img src="/src/assets/images/WeeklyStar/btBg.png" alt="" width="100%" />
+                <img :src="images.btBg" alt="" width="100%" />
                 <div
                   style="
                     position: absolute;
@@ -344,11 +303,7 @@
       <div v-show="exchargeShow" style="display: flex; justify-content: center">
         <div style="position: relative; width: 90%">
           <!-- 背景图 -->
-          <img
-            src="/src/assets/images/WeeklyStar/longBg.png"
-            alt=""
-            style="width: 100%; display: block"
-          />
+          <img :src="images.longBg" alt="" style="width: 100%; display: block" />
           <!-- 标题 -->
           <div
             style="
@@ -383,7 +338,7 @@
             <!-- 碎片 -->
             <div style="display: flex; align-items: center">
               <img
-                src="/src/assets/images/WeeklyStar/debris.png"
+                :src="images.debris"
                 alt=""
                 style="width: 15%; display: block; margin-right: 5px"
               />
@@ -405,11 +360,7 @@
                     align-items: center;
                   "
                 >
-                  <img
-                    src="/src/assets/images/WeeklyStar/giftItemBg.png"
-                    alt=""
-                    style="width: 100%; display: block"
-                  />
+                  <img :src="images.giftItemBg" alt="" style="width: 100%; display: block" />
                   <div
                     style="
                       position: absolute;
@@ -434,12 +385,7 @@
                   Permanent/{{ JSON.parse(goods.rule.jsonData).need_fragments }} Star
                 </div>
                 <div style="position: relative; width: 75%" @click="selectGood(goods)">
-                  <img
-                    src="/src/assets/images/WeeklyStar/btBg.png"
-                    alt=""
-                    width="100%"
-                    style="display: block"
-                  />
+                  <img :src="images.btBg" alt="" width="100%" style="display: block" />
                   <div
                     style="
                       position: absolute;
@@ -478,11 +424,7 @@
         z-index: 999;
       "
     >
-      <img
-        src="/src/assets/images/WeeklyStar/myRankingBg.png"
-        alt=""
-        style="width: calc(100% - 1px); display: block"
-      />
+      <img :src="images.myRankingBg" alt="" style="width: calc(100% - 1px); display: block" />
 
       <div
         style="
@@ -543,17 +485,13 @@
     <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
       <!-- help弹窗 -->
       <div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
-        <img src="/src/assets/images/WeeklyStar/helpInfo.png" alt="" style="width: 100%" />
+        <img :src="images.helpInfo" alt="" style="width: 100%" />
       </div>
 
       <!-- history弹窗 -->
       <div v-if="historyShow" style="position: relative; margin: 20% 0" @click.stop>
         <!-- 背景图 -->
-        <img
-          src="/src/assets/images/WeeklyStar/mediumBg.png"
-          alt=""
-          style="width: 100%; display: block"
-        />
+        <img :src="images.mediumBg" alt="" style="width: 100%; display: block" />
         <!-- 标题 -->
         <div
           style="
@@ -591,7 +529,7 @@
           <div style="position: relative; width: 75%">
             <!-- 头像框 -->
             <img
-              src="/src/assets/images/WeeklyStar/topOneHistory.png"
+              :src="images.topOneHistory"
               alt=""
               style="width: 100%; display: block; position: relative; z-index: 1"
             />
@@ -618,11 +556,7 @@
           <!-- 名字 -->
           <div style="position: relative; width: 25%">
             <!-- 背景图 -->
-            <img
-              src="/src/assets/images/WeeklyStar/nameBg.png"
-              alt=""
-              style="width: 100%; display: block"
-            />
+            <img :src="images.nameBg" alt="" style="width: 100%; display: block" />
             <div
               style="
                 position: absolute;
@@ -691,11 +625,7 @@
       <!-- gifts弹窗 -->
       <div v-if="giftsShow" style="position: relative; margin: 20% 0" @click.stop>
         <!-- 背景图 -->
-        <img
-          src="/src/assets/images/WeeklyStar/giftsBg.png"
-          alt=""
-          style="width: 100%; display: block"
-        />
+        <img :src="images.giftsBg" alt="" style="width: 100%; display: block" />
         <!-- 内容 -->
         <div
           style="
@@ -713,11 +643,7 @@
           <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
             <!-- 礼物背景 -->
             <div style="position: relative">
-              <img
-                src="/src/assets/images/WeeklyStar/giftItemBg.png"
-                alt=""
-                style="width: 100%; display: block"
-              />
+              <img :src="images.giftItemBg" alt="" style="width: 100%; display: block" />
               <div
                 style="
                   position: absolute;
@@ -757,11 +683,7 @@
       <!-- 交易商品弹窗 -->
       <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
         <!-- 背景图 -->
-        <img
-          src="/src/assets/images/WeeklyStar/mediumBg.png"
-          alt=""
-          style="width: 100%; display: block"
-        />
+        <img :src="images.mediumBg" alt="" style="width: 100%; display: block" />
         <!-- 标题 -->
         <div
           style="
@@ -802,7 +724,7 @@
           />
           <div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
           <img
-            src="/src/assets/images/WeeklyStar/ConfirmBt.png"
+            :src="images.ConfirmBt"
             alt=""
             style="width: 30%; display: block"
             @click="exchangeSelectedGood(selectedGood.rule.id)"
@@ -832,6 +754,15 @@ import {
   getExchangeGoods,
   exchangeGood,
 } from '@/api/weeklyStar.js'
+//vite动态批量导入图片
+const imageModules = import.meta.glob('@/assets/images/WeeklyStar/*.{png,jpg,svg}', { eager: true })
+// 生成文件名映射对象（自动移除路径和扩展名）
+const images = Object.fromEntries(
+  Object.entries(imageModules).map(([Path2D, module]) => {
+    const fileName = Path2D.split('/').pop().split('.')[0]
+    return [fileName, module.default]
+  })
+)
 
 const isInAppEnvironment = ref(false) // 检测是否在APP环境中
 const helpInfoShow = ref(false) //帮助模块
@@ -876,7 +807,7 @@ const gifts = ref([]) // 本周礼物
 const historyRankingTop1 = ref([]) // 历史榜首
 const historyIndex = ref(0)
 const showTopOne = computed(() => {
-  return historyRankingTop1.value[historyIndex.value]
+  return historyRankingTop1.value[historyIndex.value] || {}
 })
 
 const exchangeGoodsList = ref([])
@@ -919,9 +850,10 @@ const handleImageError = (e, type) => {
   }
 }
 
+// 头像资源出错处理
 const defaultAvatarUrl = (e) => {
   console.log('头像资源出错')
-  e.target.src = '/src/assets/images/WeeklyStar/defaultAvatar.png'
+  e.target.src = images.defaultAvatar
 }
 
 // 选中要兑换的商品
@@ -1162,7 +1094,7 @@ onUnmounted(() => {
   width: 100vw;
   min-height: 100vh;
   background-color: #311300;
-  background-image: url(../../assets/images/WeeklyStar/bg.png);
+  background-image: url('@/assets/images/WeeklyStar/bg.png');
   background-size: 100% auto;
   background-repeat: no-repeat;
   position: relative;