vue項目中圖片懶加載時出現(xiàn)的問題及解決
更新時間：2022年04月02日 08:41:27 作者：池中飛雪
這篇文章主要介紹了vue項目中圖片懶加載時出現(xiàn)的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue圖片懶加載的問題
項目中遇到一個問題，記錄一下，vue項目中前期沒有做圖片懶加載的時候，當圖片出現(xiàn)錯誤或者顯示路徑不對，我加了onerror事件進行錯誤監(jiān)聽并添加一張默認的圖片，優(yōu)化用戶體驗。
后期因為圖片數(shù)量變多，所以加入了圖片懶加載，但在懶加載中掛載時只加了loading的圖片，沒有加error，所以導致頁面圖片未正常加載的地方出現(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.在渲染結構的地方把：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.修改圖片的路徑，設置為懶加載的形式，將src改成v-lazy
<img v-lazy="psdimg" class="psd" />
今天踩過的坑總結
當遇到是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里面的圖片路徑拿到后，轉換成懶加載的時候，
一定是 data-src，而不是v-lazy，要不然在接口獲取的時候，拿到了圖片地址，但是會一直顯示不出來的。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Netlify 帶有內置表單處理功能，可以用來存儲表單數(shù)據(jù)，下載 csv 文件，同時可以在接收到新的提交時發(fā)送郵件通知或者通過配置 webhook 發(fā)送請求。這篇文章主要介紹了在 Vue 應用中使用 Netlify 表單功能,需要的朋友可以參考下2019-06-06
關于vue 結合原生js 解決echarts resize問題
這篇文章主要介紹了關于vue 結合原生js 解決echarts resize問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本篇文章主要介紹了Vue監(jiān)測數(shù)據(jù)的原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看2021-10-10
這篇文章主要介紹了vue實現(xiàn)固定位置顯示功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了在vue中動態(tài)修改css其中一個屬性值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
elementui中使用el-tabs切換實時更新數(shù)據(jù)
這篇文章主要介紹了elementui中使用el-tabs切換實時更新數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3+element?Plus實現(xiàn)表格前端分頁完整示例
這篇文章主要給大家介紹了關于vue3+element?Plus實現(xiàn)表格前端分頁的相關資料,雖然很多時候后端會把分頁,搜索,排序都做好,但是有些返回數(shù)據(jù)并不多的頁面,或者其他原因不能后端分頁的通常會前端處理,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue中的自定義屬性并獲得屬性的值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了超詳細的5個Shell腳本實例分享(值得收藏),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改的解決
本文主要介紹了vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01