用vue-lazyload处理图片

package.json

@@ -17,6 +17,7 @@
     "swiper": "^8.4.4",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.14",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

src/components/HotspotDetail.vue

@@ -52,8 +52,8 @@
           <img
             v-for="(item, index) in typesToShow[currentTabIdx].list"
             :key="index"
+            v-lazy="item.url"
             class="swiper-slide"
-            :src="item.url"
             alt=""
             draggable="false"
           >
@@ -80,8 +80,8 @@
           <img
             v-for="(item, index) in typesToShow[currentTabIdx].list"
             :key="index"
+            v-lazy="item.url"
             class="swiper-slide"
-            :src="item.url"
             alt=""
             draggable="false"
           >
@@ -108,8 +108,8 @@
           <img
             v-for="(item, index) in typesToShow[currentTabIdx].list"
             :key="index"
+            v-lazy="item.url"
             class="swiper-slide"
-            :src="item.url"
             alt=""
             draggable="false"
           >
@@ -136,8 +136,8 @@
           <img
             v-for="(item, index) in typesToShow[currentTabIdx].list"
             :key="index"
+            v-lazy="item.url"
             class="swiper-slide"
-            :src="item.url"
             alt=""
             draggable="false"
           >

src/components/PanoList.vue

@@ -62,7 +62,7 @@
           @click="onClickScene(scene)"
         >
           <img
-            :src="scene.icon + '?x-oss-process=image/resize,p_30'"
+            v-lazy="scene.icon + '?x-oss-process=image/resize,p_30'"
             alt=""
             draggable="false"
           >

src/components/RelicDetail.vue

@@ -40,8 +40,8 @@
             <img
               v-for="(item, index) in imageList"
               :key="index"
+              v-lazy="item"
               class="swiper-slide"
-              :src="item"
               alt=""
               draggable="false"
             >

src/components/RelicItem.vue

@@ -8,7 +8,7 @@
         class="node-point-top"
       />
       <img
-        src="@/assets/images/curvy-line.png"
+        v-lazy="require('@/assets/images/curvy-line.png')"
         alt=""
         class="curvy-line"
       >
@@ -26,8 +26,8 @@
       @click="onClickRelicInfo"
     >
       <img
+        v-lazy="relicImage"
         class="relic-image"
-        :src="relicImage"
         alt=""
         draggable="false"
       >

src/main.js

@@ -8,6 +8,7 @@ import "@/assets/style/my-reset.css"
 import clickOutside from "@/directives/v-click-outside.js"
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
+import VueLazyload from 'vue-lazyload'
 import { MessageCenter } from "@/utils.js"
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
@@ -52,6 +53,7 @@ Vue.config.productionTip = false
 
 Vue.use(clickOutside)
 Vue.use(Viewer)
+Vue.use(VueLazyload)
 
 new Vue({
   router,

src/views/RelicsAppr.vue

@@ -124,7 +124,7 @@
       >
         <div class="img-wrap">
           <img
-            :src="`${$cdnPath}2D/${item.bs}${item.imgNum ? `_1` : ``}.JPG?x-oss-process=image/resize,p_4`"
+            v-lazy="`${$cdnPath}2D/${item.bs}${item.imgNum ? `_1` : ``}.JPG?x-oss-process=image/resize,p_4`"
             alt=""
             draggable="false"
           >

yarn.lock

@@ -7901,6 +7901,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-lazyload@^1.3.3:
+  version "1.3.4"
+  resolved "https://r2.cnpmjs.org/vue-lazyload/-/vue-lazyload-1.3.4.tgz#2988998f6bc1a2027268f5b0cffa7a7e30e6ccb4"
+  integrity sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q==
+
 vue-loader@^17.0.0:
   version "17.0.0"
   resolved "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.0.0.tgz#2eaa80aab125b19f00faa794b5bd867b17f85acb"