vue中當圖片地址無效的時候,顯示默認圖片的方法
更新時間：2018年09月18日 14:59:42 作者：小圣賢君
今天小編就為大家分享一篇vue中當圖片地址無效的時候,顯示默認圖片的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
web項目中經(jīng)常需要展示圖片，很可能就會碰到圖片地址無效的情況，比如圖片地址不對，或者后臺拿到圖片地址后，該地址無效，或者數(shù)據(jù)庫中沒有該圖片等情況。這時候，圖片就會顯示一個叉。
對于項目中出現(xiàn)的這種情況，我們也可以不做處理，但是比較影響美觀，所以我們都會使用一個默認的圖片來代替圖片原來的地址。
<img :src="item.img" @error="imgError(item)" />
給圖片添加一個error校驗，當圖片加載失效的時候，就會調(diào)用該屬性的方法。
在methods中添加如下方法：
imgError(item) {
item.img = require('../../assets/img-default.png');
}
在方法中修改圖片的地址為默認圖片的地址。
當前端通過接口從后臺獲取到圖片的地址參數(shù)后，該參數(shù)很可能會為null,對于這種情況，我們應該做一個判斷，如果該圖片地址不存在，那么直接賦值一個默認的圖片地址，如果該圖片的地址存在，但是鏈接后沒有獲得圖片，那么，這種情況就可以采用上述的方法進行完善。
以上這篇vue中當圖片地址無效的時候,顯示默認圖片的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue實現(xiàn)登錄數(shù)據(jù)的持久化的使用示例
在Vue.js中,實現(xiàn)登錄數(shù)據(jù)的持久化需要使用瀏覽器提供的本地存儲功能,Vue.js支持使用localStorage和sessionStorage來實現(xiàn)本地存儲,本文就來介紹一下如何實現(xiàn),感興趣的可以了解一下2023-10-10
VueUse提供了一個豐富且強大的Hooks庫,可以幫助開發(fā)者快速實現(xiàn)各種功能,提高開發(fā)效率,本文來詳細的介紹一下,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08
這篇文章主要介紹了vue組件代碼分塊和懶加載講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章給大家詳細介紹了Vue強制組件重新渲染的正確方法,非常的實用,有需要的小伙伴可以參考下2020-02-02
這篇文章主要介紹了vue3.0安裝element?plus依賴的過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue?MVVM雙向綁定實例詳解(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)
使用vue也好有一段時間了,也算對其雙向綁定原理也有了解個大概,這篇文章主要給大家介紹了關于vue?MVVM雙向綁定(數(shù)據(jù)劫持+發(fā)布者-訂閱者模式)的相關資料,需要的朋友可以參考下2022-03-03
Vue3項目中通過LuckySheet實現(xiàn)Excel在線編輯功能
在實現(xiàn)Excel文件導入時,領導要求實現(xiàn)在前端導入文件后,不調(diào)用后端的接口,而是直接顯示excel文件的內(nèi)容,等待用戶修改完以后,再調(diào)用后端接口進行文件的提交,所以本文介紹了Vue3項目中通過LuckySheet實現(xiàn)Excel在線編輯,需要的朋友可以參考下2025-04-04
Vue + better-scroll 實現(xiàn)移動端字母索引導航功能
better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。這篇文章主要介紹了Vue + better-scroll 實現(xiàn)移動端字母索引導航功能,需要的朋友可以參考下2018-05-05
本篇文章介紹了如何使用 Vue3 實現(xiàn)一個鼠標經(jīng)過顯示按鈕的效果,我們使用了 Vue3 的 Composition API 來創(chuàng)建響應式的數(shù)據(jù),并使用了?@mouseover?和?@mouseleave?事件來監(jiān)聽鼠標的移入和移出事件,感興趣的朋友一起看看吧2024-04-04
這篇文章主要介紹了關于路由重定向redirect的基本使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08