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