vue圖片加載失敗時用默認(rèn)圖片替換的方法
更新時間：2019年08月29日 11:08:35 作者：Asunyu
這篇文章主要給大家介紹了關(guān)于vue圖片加載失敗時用默認(rèn)圖片替換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
前言
本文主要給大家介紹的關(guān)于vue實(shí)現(xiàn)圖片加載失敗時用默認(rèn)圖片替換的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧
方法如下
原理就是給img綁定error事件，替換原有的src地址。
首先在data中創(chuàng)建一個defaultImg（隨便起的），里面的值是該默認(rèn)圖片的地址；
在html頁面的img標(biāo)簽上綁定該屬性
這樣默認(rèn)圖片就設(shè)置好了；
這樣做的好處就是可以提高用戶體驗(yàn)，而圖片的alt屬性，是在圖片顯示失敗后出現(xiàn)的文字，像下圖所示，但是這樣的用戶體驗(yàn)不高；
像后臺管理系統(tǒng)中，如果是這樣或者是有一個默認(rèn)封面的話，會感覺很舒服；
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于利用jsx寫vue組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了form?表單驗(yàn)證是異步問題記錄,通過實(shí)例代碼介紹了Promise.all 和 Promise.allSettled 區(qū)別，需要的朋友可以參考下2023-01-01
vue 中this.$set 動態(tài)綁定數(shù)據(jù)的案例講解
這篇文章主要介紹了vue 中this.$set 動態(tài)綁定數(shù)據(jù)的案例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
這篇文章主要介紹了vue使用HMAC-SHA256簽名算法的相關(guān)知識,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
本篇文章主要介紹了詳解vuejs幾種不同組件（頁面）間傳值的方式，具有一定的參考價值，有興趣的可以了解一下2017-06-06
手把手帶你安裝vue-cli并創(chuàng)建第一個vue-cli應(yīng)用程序
vue-cli這個構(gòu)建工具大大降低了webpack的使用難度,支持熱更新,有webpack-dev-server的支持,相當(dāng)于啟動了一個請求服務(wù)器,給你搭建了一個測試環(huán)境,下面這篇文章主要給大家介紹了關(guān)于安裝vue-cli并創(chuàng)建第一個vue-cli應(yīng)用程序的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了在vue中使用公共過濾器filter的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue 集成jTopo 處理方法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue圖片拖拉轉(zhuǎn)放大縮小組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10