vue圖片加載失敗時用默認圖片替換的方法
更新時間：2019年08月29日 11:08:35 作者：Asunyu
這篇文章主要給大家介紹了關(guān)于vue圖片加載失敗時用默認圖片替換的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
前言
本文主要給大家介紹的關(guān)于vue實現(xiàn)圖片加載失敗時用默認圖片替換的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細的介紹吧
方法如下
原理就是給img綁定error事件，替換原有的src地址。
首先在data中創(chuàng)建一個defaultImg（隨便起的），里面的值是該默認圖片的地址；
在html頁面的img標簽上綁定該屬性
這樣默認圖片就設(shè)置好了；
這樣做的好處就是可以提高用戶體驗，而圖片的alt屬性，是在圖片顯示失敗后出現(xiàn)的文字，像下圖所示，但是這樣的用戶體驗不高；
像后臺管理系統(tǒng)中，如果是這樣或者是有一個默認封面的話，會感覺很舒服；
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。
相關(guān)文章
Vue2 Element el-table多選表格控制選取的思路解讀
這篇文章主要介紹了Vue2 Element el-table多選表格控制選取的思路解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3 elementUI 中 date-picker 使用過程遇到坑
這篇文章主要介紹了Vue3 elementUI 中 date-picker 使用過程遇到坑,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用)
這篇文章主要介紹了Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中g(shù)et和post請求的區(qū)別點總結(jié)
在本篇文章里小編給大家分享的是一篇關(guān)于vue中g(shù)et和post請求的區(qū)別點總結(jié)內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
Vue使用v-model收集各種表單數(shù)據(jù)、過濾器的示例詳解
這篇文章主要介紹了Vue使用v-model收集各種表單數(shù)據(jù)、過濾器的示例,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要為大家介紹了ToB項目如何沉淀業(yè)務(wù)公共組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
相信開發(fā)中或多或少都會有使用md的時候。那么一個簡易的md編輯器顯得尤為重要，如果想要在自己的項目中添加一個md編輯器，那么不妨來看看這篇文章2021-10-10
在現(xiàn)代前端開發(fā)中,Vue.js憑借其輕量級和易用性,成為了很多開發(fā)者的首選框架,本文將結(jié)合實際案例,詳細講解Vue-Router路由懶加載的用法,需要的可以參考下2024-11-11
這篇文章主要為大家詳細介紹了如何利用Vue實現(xiàn)讀取本地圖片的功能，文中的示例代碼講解詳細，具有一定的參考價值，需要的小伙伴可以學(xué)習(xí)一下2023-07-07
本文介紹了Pinia的使用方法及如何實現(xiàn)狀態(tài)持久化存儲,首先,介紹了Pinia的安裝和在main.ts中的掛載,介紹了getters和actions的使用方法,最后,詳細說明了如何通過Pinia-plugin-persistedstate插件實現(xiàn)Pinia狀態(tài)的持久化處理,包括插件的安裝、配置和在main.ts文件中的注冊2024-10-10