perf(图片优化): 为所有图片URL添加压缩和缩略图参数以提高加载性能

hookehuyr
Commit 37fccf8351dfd9f5a9bbae324119423ba6cca030 37fccf83 1 parent 0a030160
Showing 3 changed files with 14 additions and 14 deletions
src/views/Home.vue
src/views/Masters.vue
src/views/MastersDetail.vue
--- a/src/views/Home.vue
View file @37fccf8
+++ b/src/views/Home.vue
View file @37fccf8
@@ -108,7 +108,7 @@
         <div class="three-columns">
           <!-- 三师七证栏目 -->
           <div class="column-item" v-for="(item, index) in mastersList" :key="index">
-            <div class="column-content" :style="{ backgroundImage: `url(${item.cover})` }">
+            <div class="column-content" :style="{ backgroundImage: `url(${item.cover + '?imageMogr2/thumbnail/100x/strip/quality/70'})` }">
               <div class="column-overlay"></div>
               <div class="column-text">
                 <h3 class="column-title">{{ item.name }}</h3>
@@ -148,7 +148,7 @@
           <div class="news-carousel" ref="newsCarousel">
             <div class="news-item" v-for="(item, index) in displayNewsItems" :key="index" @click="handleNewsClick(item)">
               <div class="news-image">
-                <img :src="item.image" :alt="item.title">
+                <img :src="item.image + '?imageMogr2/thumbnail/200x/strip/quality/70'" :alt="item.title">
               </div>
               <div class="news-content">
                 <div class="news-title">{{ item.title }}</div>
@@ -202,7 +202,7 @@ const videoOptions = ref({
   aspectRatio: '16:9',
   controls: true,
   preload: 'metadata',
-  poster: 'https://cdn.ipadbiz.cn/stdj/video/workflow.jpg',
+  poster: 'https://cdn.ipadbiz.cn/stdj/video/workflow.jpg?imageMogr2/thumbnail/200x/strip/quality/70',
   playbackRates: [0.5, 1, 1.25, 1.5, 2],
 })
@@ -261,7 +261,7 @@ const currentStep = computed(() => {
  * @returns {Object} 内联样式对象
  */
 const intro_background_style = computed(() => {
-    const url = currentStep.value && currentStep.value.cover ? currentStep.value.cover : ''
+    const url = currentStep.value && currentStep.value.cover ? currentStep.value.cover + '?imageMogr2/thumbnail/400x/strip/quality/70' : ''
     if (!url) return {}
     const safe_url = encodeURI(url)
     return { backgroundImage: 'url("' + safe_url + '")' }
@@ -759,7 +759,7 @@ const handlePhotoClick = () => {
   margin: 0 1rem;
   height: 3.5rem;
   border-radius: 1rem;
-  background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E7%85%A7%E7%89%87%E4%B8%8B%E8%BD%BD@2x.png');
+  background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E7%85%A7%E7%89%87%E4%B8%8B%E8%BD%BD@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -1048,7 +1048,7 @@ const handlePhotoClick = () => {
 .ceremony-wrapper {
   position: relative;
   width: 100vw;
-  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png');
+  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -1582,7 +1582,7 @@ const handlePhotoClick = () => {
 .news-section {
   padding: 3rem 1.5rem;
   position: relative;
-  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png');
+  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/%E8%83%8C%E6%99%AF@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -1597,7 +1597,7 @@ const handlePhotoClick = () => {
   left: 0;
   width: 100%; /* 可根据实际图片大小调整 */
   height: 200px; /* 可根据实际图片大小调整 */
-  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/bg@2x.png');
+  background-image: url('https://cdn.ipadbiz.cn/stdj/images/home/bg@2x.png?imageMogr2/thumbnail/200x/strip/quality/70');
   background-size: cover;
   background-repeat: no-repeat;
   z-index: 1;
--- a/src/views/Masters.vue
View file @37fccf8
+++ b/src/views/Masters.vue
View file @37fccf8
@@ -86,13 +86,13 @@ onMounted(async () => {
       id: item.id,
       role: item.post_excerpt,
       name: item.post_title,
-      image: item.photo
+      image: item.photo + '?imageMogr2/thumbnail/400x/strip/quality/70'
     }))
     gridItems.value = gridItemsData.map(item => ({
       id: item.id,
       role: item.post_excerpt,
       name: item.post_title,
-      image: item.photo
+      image: item.photo + '?imageMogr2/thumbnail/400x/strip/quality/70'
     }))
   }
 })
--- a/src/views/MastersDetail.vue
View file @37fccf8
+++ b/src/views/MastersDetail.vue
View file @37fccf8
 <!--
  * @Date: 2025-10-30 20:00:25
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-12 11:30:48
+ * @LastEditTime: 2025-11-13 10:33:41
  * @FilePath: /stdj_h5/src/views/MastersDetail.vue
  * @Description: 文件描述
 -->
@@ -88,7 +88,7 @@ const loadArticleDetail = async () => {
         id: data.id,
         role: data.post_excerpt,
         name: data.post_title,
-        src: data?.file_list?.photo?.value,
+        src: data?.file_list?.photo?.value + '?imageMogr2/thumbnail/400x/strip/quality/70',
         desc: data.post_content,
         imgs: data?.file_list?.img || []
       }
@@ -117,7 +117,7 @@ const initWaterfallImages = function (imgs) {
         const src = typeof item === 'string' ? item : (item?.value || item?.src || '')
         return {
             id: typeof item === 'object' && item?.id ? item.id : idx + 1,
-            src: src,
+            src: src + '?imageMogr2/thumbnail/400x/strip/quality/70',
             title: typeof item === 'object' && item?.name ? item.name : ('图片' + (idx + 1)),
             height: Math.floor(Math.random() * 200) + 200
         }
@@ -172,7 +172,7 @@ const onImageError = function () {
  */
 const onImageClick = function (item) {
     const currentIndex = all_images.value.findIndex(function (img) { return img.id === item.id })
-    const images = all_images.value.map(function (img) { return img.src })
+    const images = all_images.value.map(function (img) { return img.src.replace('?imageMogr2/thumbnail/400x/strip/quality/70', '') })
     showImagePreview({
         images: images,
         startPosition: currentIndex >= 0 ? currentIndex : 0,