feat:修改图片

package.json

@@ -37,6 +37,7 @@
     "sortablejs": "^1.15.1",
     "vue": "^3.3.8",
     "vue-draggable-plus": "^0.3.5",
+    "vue-lazyload": "^3.0.0",
     "vue-mousetrap": "^1.0.5",
     "vue-router": "^4.1.6",
     "vue-types": "^4.2.1",

pnpm-lock.yaml

@@ -71,6 +71,9 @@ dependencies:
   vue-draggable-plus:
     specifier: ^0.3.5
     version: 0.3.5(@types/sortablejs@1.15.7)
+  vue-lazyload:
+    specifier: ^3.0.0
+    version: 3.0.0
   vue-mousetrap:
     specifier: ^1.0.5
     version: 1.0.5
@@ -7320,6 +7323,10 @@ packages:
       - supports-color
     dev: true
 
+  /vue-lazyload@3.0.0:
+    resolution: {integrity: sha512-h2keL/Rj550dLgesgOtXJS9qOiSMmuJNeVlfNAYV1/IYwOQYaWk5mFJlwRxmZDK9YC5gECcFLYYj7z1lKSf9ug==}
+    dev: false
+
   /vue-mousetrap@1.0.5:
     resolution: {integrity: sha512-mDyPBBTnOrpUNDZ4vjd7X8emYwKFG2/Rsi5coZKDmF+dM5XpENrnvdmef4xHq2gcZ1HVmHqeI5jQP17p9fFpzA==}
     dependencies:

src/main.ts

@@ -5,6 +5,9 @@ import router, { setupRouter } from './router'
 import { setupGlobalProperties, setupMousestrap, setupNaive, setupNaiveDiscreteApi, setupSvgIcon } from '@/plugins'
 import { setupStore } from '@/store'
 import 'virtual:svg-icons-register'
+import VueLazyload from 'vue-lazyload'
+import bgPng from '@/assets/images/bg-loading.png'
+import closePng from '@/assets/images/close.png'
 
 async function bootstrap() {
   const app = createApp(App)
@@ -19,6 +22,12 @@ async function bootstrap() {
 const meta = document.createElement('meta')
   meta.name = 'naive-ui-style'
   document.head.appendChild(meta)
+  app.use(VueLazyload, {
+    preLoad: 1.3,
+    error: closePng,
+    loading: bgPng,
+    attempt: 1
+  })
   app.mount('#app', true)
 }
 

src/views/home/content/Content.vue

@@ -719,7 +719,12 @@ defineExpose({
                 :preview-src="item.imgUrl"
                 :src="item.thumburl"
                 :fallback-src="bgLoadingImg"
+                style="display: none"
               />
+              <img v-lazy="item.thumburl" class="img" :class="{
+                  'img-fit': viewMode === 'horizontalVersion',
+                  'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
+                }" alt="">
               <img
                 v-if="item.states == 3"
                 class="tag-status"