溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下vue中如何實現當圖片地址無效時顯示默認圖片，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
web項目中經常需要展示圖片，很可能就會碰到圖片地址無效的情況，比如圖片地址不對，或者后臺拿到圖片地址后，該地址無效，或者數據庫中沒有該圖片等情況。這時候，圖片就會顯示一個叉。
對于項目中出現的這種情況，我們也可以不做處理，但是比較影響美觀，所以我們都會使用一個默認的圖片來代替圖片原來的地址。
<img :src="item.img" @error="imgError(item)" />
給圖片添加一個error校驗，當圖片加載失效的時候，就會調用該屬性的方法。
在methods中添加如下方法：
imgError(item) {
item.img = require('../../assets/img-default.png');
}在方法中修改圖片的地址為默認圖片的地址。
當前端通過接口從后臺獲取到圖片的地址參數后，該參數很可能會為null,對于這種情況，我們應該做一個判斷，如果該圖片地址不存在，那么直接賦值一個默認的圖片地址，如果該圖片的地址存在，但是鏈接后沒有獲得圖片，那么，這種情況就可以采用上述的方法進行完善。
以上是“vue中如何實現當圖片地址無效時顯示默認圖片”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
