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