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