feat(管理员政策页): 图片转移到oss上获取

src/views/AdminCenter/policy.vue

@@ -7,7 +7,30 @@
       color="black"
       style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
     />
-    <img :src="policyImgUrl" alt="" style="display: block; width: 100vw; object-fit: cover" />
+    <img
+      v-smart-img
+      :src="imageUrl(getImgName('policy0'))"
+      alt=""
+      style="width: 100%; display: block"
+    />
+    <img
+      v-smart-img
+      :src="imageUrl(getImgName('policy1'))"
+      alt=""
+      style="width: 100%; display: block"
+    />
+    <img
+      v-smart-img
+      :src="imageUrl(getImgName('policy2'))"
+      alt=""
+      style="width: 100%; display: block"
+    />
+    <img
+      v-smart-img
+      :src="imageUrl(getImgName('policy3'))"
+      alt=""
+      style="width: 100%; display: block"
+    />
   </div>
 </template>
 
@@ -15,9 +38,18 @@
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useLangStore } from '@/stores/lang'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
 
 import GeneralHeader from '@/components/GeneralHeader.vue'
 
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('AdminCenter/Policy/', filename)
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
 const langStore = useLangStore()
 const { t, locale } = useI18n()
 
@@ -30,22 +62,31 @@ const policyImgUrl = ref('') //政策图
 
 const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
 
-const updateImages = () => {
-  if (currentLangType.value === 'en') {
-    policyImgUrl.value = new URL(
-      '/src/assets/images/AdminCenter/Policy/policy.png',
-      import.meta.url
-    ).href
-  } else if (currentLangType.value === 'ar') {
-    policyImgUrl.value = new URL(
-      '/src/assets/images/AdminCenter/Policy/policyAr.png',
-      import.meta.url
-    ).href
+// 预加载关键图片
+const preloadCriticalImages = () => {
+  const criticalImages = [
+    imageUrl('policy0'),
+    imageUrl('policy1'),
+    imageUrl('policy2'),
+    imageUrl('policy3'),
+  ]
+
+  const criticalImages_ar = [
+    imageUrl('policy0_ar'),
+    imageUrl('policy1_ar'),
+    imageUrl('policy2_ar'),
+    imageUrl('policy3_ar'),
+  ]
+
+  if (currentLangType.value == 'en') {
+    preloadImages(criticalImages)
+  } else if (currentLangType.value == 'ar') {
+    preloadImages(criticalImages_ar)
   }
 }
 
 onMounted(() => {
-  updateImages()
+  preloadCriticalImages() //预加载关键图片
 })
 </script>