vue項目中圖片懶加載時出現(xiàn)的問題及解決
更新時間：2022年04月02日 08:41:27 作者：池中飛雪
這篇文章主要介紹了vue項目中圖片懶加載時出現(xiàn)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue圖片懶加載的問題
項目中遇到一個問題，記錄一下，vue項目中前期沒有做圖片懶加載的時候，當(dāng)圖片出現(xiàn)錯誤或者顯示路徑不對，我加了onerror事件進行錯誤監(jiān)聽并添加一張默認的圖片，優(yōu)化用戶體驗。
后期因為圖片數(shù)量變多，所以加入了圖片懶加載，但在懶加載中掛載時只加了loading的圖片，沒有加error，所以導(dǎo)致頁面圖片未正常加載的地方出現(xiàn)默認圖片閃爍的現(xiàn)象，最后在掛載時加入error引入一張默認圖片就好了
vue圖片懶加載實現(xiàn)步驟
1.安裝插件
npm install vue-lazyload --save-dev
2.main.js中引入，掛載
import Vuelazyload from 'vue-lazyload'
Vue.use(Vuelazyload, {
? ? ? ?error: require('../static/img/nonelive.png'),
? ? ? ?loading: require('../static/img/nonelive.png')
})3.在渲染結(jié)構(gòu)的地方把：src換成v-lazy即可
<img v-lazy="item.pictureUrl?item.pictureUrl:'../../../static/img/nonelive.png'" alt="圖片未顯示" οnerrοr="this.src='../../../static/img/nonelive.png'">
vue圖片懶加載踩過的坑
一個頁面圖片比較多的時候，需要對界面的圖片進行懶加載處理，今天遇到了，做個懶加載的筆記。
1.需要安裝vue的懶加載插件。
npm install vue-lazyload --save-dev
2.需要在main.js里面進行引用。
import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload);
或者自定義
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})3.修改圖片的路徑，設(shè)置為懶加載的形式，將src改成v-lazy
<img v-lazy="psdimg" class="psd" />
今天踩過的坑總結(jié)
當(dāng)遇到是v-for循環(huán)的時候，或者用div包裹著img的時候，需要在div上面添加v-lazy-container="{selector:'img'}"
<div?v-lazy-container="{?selector:?'img'?}">
??<img?data-src="http://domain.com/img1.jpg">
??<img?data-src="http://domain.com/img2.jpg">
??<img?data-src="http://domain.com/img3.jpg">??
</div>或者這種：
?<div>
v-lazy-container="{?selector:?'img'?}"
class="contentDiv?construction"
v-html="content">
</div>以及我將html里面的圖片路徑拿到后，轉(zhuǎn)換成懶加載的時候，
一定是 data-src，而不是v-lazy，要不然在接口獲取的時候，拿到了圖片地址，但是會一直顯示不出來的。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vite?Vue3?EsLint?Prettier配置步驟極簡方法詳解
這篇文章主要為大家介紹了Vite?Vue3?EsLint?Prettier配置步驟的極簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
今天小編就為大家分享一篇Vue解析帶html標簽的字符串為dom的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue純前端實現(xiàn)導(dǎo)出Excel并修改樣式
這篇文章主要為大家詳細介紹了Vue如何利用xlsx-style庫實現(xiàn)導(dǎo)出Excel并修改樣式的功能,文中的示例代碼講解詳細,有需要的可以參考下2024-01-01
這篇文章主要介紹了在Vue中使用防抖與節(jié)流,及this指向的問題,具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
本文給大家詳細介紹了如何使用使用 vue.js腳手架工具vue-cli構(gòu)建大型單頁應(yīng)用的方法，非常的實用，有需要的小伙伴可以參考下2018-02-02
在開發(fā)中,PDF預(yù)覽和交互功能是一個常見的需求,無論是管理系統(tǒng)、在線教育平臺,還是企業(yè)內(nèi)部的知識庫,能夠高效地展示和操作PDF文件都能極大地提升用戶體驗,本文將詳細介紹如何在Vue項目中實現(xiàn)pdf預(yù)覽功能,需要的朋友可以參考下2025-03-03
vue.js中Vue-router 2.0基礎(chǔ)實踐教程
這篇文章主要給大家介紹了關(guān)于vue.js中Vue-router 2.0基礎(chǔ)實踐的相關(guān)資料，其中包括vue-router 2.0的基礎(chǔ)用法、動態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關(guān)知識，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
本篇文章主要給大家講述了VueJS應(yīng)用中管理用戶權(quán)限的詳細過程和方法，以及相關(guān)的代碼展示，需要的朋友參考下吧。2018-02-02
最近項目中使用了vue3+vite開發(fā)一個App項,下面這篇文章主要給大家介紹了關(guān)于使用vite發(fā)布app存在的所有問題的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了vue3組件庫Shake抖動組件搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10