懒加载

src/components/public/apartment-item.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="item flexflex" @click="goapArtmentDetails">
-        <img class="img" :src="item['image']">
+        <img class="img" v-lazy="item['image']">
         <div class="title">{{ item['title'] }}</div>
         <div class="hint">{{ item['propaganda'] }}</div>
         <div class="tab-box flexflex" v-if="item['tags']">

src/main.js

@@ -33,6 +33,10 @@ import 'element-plus/theme-chalk/index.css'
 import locale from 'element-plus/lib/locale/lang/zh-cn';
 
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+import lazyPlugin from 'vue3-lazyload'
+
+
 // import zhCn from 'element-plus/lib/locale/lang/zh-cn'
 import api from "./utils/api";
 
@@ -76,6 +80,9 @@ app.use(ElMessage)
 app.use(ElBreadcrumb)
 app.use(ElAffix)
 
+app.use(lazyPlugin)
+
+
 app.use(store).use(router).use(Axios).mount('#app')
 // app.use(store).use(router).use(Axios).use(ElementPlus, {
 //   locale: zhCn

src/views/apartmentDetail.vue

@@ -247,7 +247,7 @@
                         <img class="icon" src="@/assets/img/apartmentDetail/live.png">
                         品牌介绍
                     </div>
-                    <img class="company-img flexflex" :src="company['imageurl']">
+                    <img class="company-img flexflex" v-lazy="company['imageurl']">
                     <div class="text" v-html="company['introduction']"></div>
                 </div>
 
@@ -295,8 +295,7 @@
                 <div class="same-brand-list" v-if="dualBrandList.length != 0">
                     <div class="same-brand-item" v-for="item in dualBrandList" @click="gobrand(item)">
                         <div class="same-brand-header">
-                            <img class="same-brand-img"
-                                src="https://axure-file.lanhuapp.com/md5__27da7a1a511d30b97b139f58626415e5.svg" />
+                            <img class="same-brand-img" v-lazy="item['image']" />
                             <div class="apartment-name">{{ item['title'] }}</div>
                             <div class="apartment-synopsis ellipsis">{{ item['propaganda'] }}</div>
                         </div>
@@ -379,6 +378,7 @@ import viewMap from '@/components/public/viewMap.vue'
 import transmitBtn from '@/components/public/transmitBtn.vue'
 import backToTop from '@/components/public/backToTop.vue'
 import imageWatch from '@/components/detail/imageWatch.vue';
+
 import { useRouter, useRoute } from 'vue-router'
 let router = useRouter()