Vue中錯誤圖片的處理的實現(xiàn)代碼
更新時間：2019年11月07日 08:28:08 作者：一步一步向上爬
這篇文章主要介紹了Vue中錯誤圖片的處理的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在一個Vue的PC項目中，要求給錯誤圖片不要讓它顯示丑陋的圖片，就要給圖片寫一個失敗后的默認(rèn)圖片，
在這里寫了兩種方法，
第一種方法，也就是百度到的最多的代碼，就是給一張圖片一個默認(rèn)值。
第二種問題，如果頁面中有很多地方都存在這個東西，那么在不同的頁面中寫很對是很麻煩的。
就使用到了VUe的指令。
這里分為了兩種情況， 一種是直接加載默認(rèn)圖片，等圖片加載完成之后再使用加載完成的圖片 。
代碼如下
// 如果自定義指令多的話，再重新開啟一個文件專門寫自定義指令 太亂了
//全局注冊自定義指令，用于判斷當(dāng)前圖片是否能夠加載成功，可以加載成功則賦值為img的src屬性，否則使用默認(rèn)圖片
//指令名稱為：real-img
// 通用錯誤圖片的處理方法，或者也可以懶加載的樣子
Vue.directive('real-img', async function (el, binding) {
let imgURL = binding.value;//獲取圖片地址
if (imgURL) {
let exist = await imageIsExist(imgURL);
if (exist) {
el.setAttribute('src', imgURL);
}
}
});
/**
* 檢測圖片是否存在
* @param url
*/
let imageIsExist = function (url) {
return new Promise((resolve) => {
var img = new Image();
img.onload = function () {
if (this.complete == true) {
console.log('資源加載');
resolve(true);
img = null;
}
}
img.onerror = function () {
console.log('資源error', img);
resolve(false);
img = null;
}
img.src = url;
})
};
使用方式
<div class="appd_d_ch_logo"> <img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt=""> </div>
第二種是直接加載圖片，等到加載失敗的時候使用默認(rèn)圖。
/**
* 檢測圖片是否存在
* @param url
*/
let imageIsExist = function (url) {
return new Promise((resolve) => {
var img = new Image();
img.onload = function () {
if (this.complete == true) {
console.log('資源加載');
resolve(true);
img = null;
}
}
img.onerror = function () {
console.log('資源error', img);
resolve(false);
img = null;
}
img.src = url;
})
};
// 單獨作用于應(yīng)用模塊的管理
// 傳的是錯誤的圖片
Vue.directive('err-img', async function (el, binding) {
let imgURL = binding.value;//獲取圖片地址
let realURL = el.src;
if (imgURL) {
let exist = await imageIsExist(realURL);
if (!exist) {
el.setAttribute('src', imgURL);
}
}
});
Vue文件中使用方式如下
<div class="appd_d_ch_logo"> <img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt=""> </div>
很久了學(xué)習(xí)一點新東西還是感覺挺高興的，Vue指令很多人都見過，但是到了用的時候總是沒想到，還是百度看到改造了一點點。
一段js代碼不需要引入在所有的頁面中使用很容易的辦到，可以把這一段js代碼放到Vue.prototype上面。
之前一直在想這個問題，有什么方式可以讓所有的代碼都可以使用一段函數(shù)或者是什么的，看到了指令，還是要多看看文檔，只有到了用的時候才可能想到自己曾經(jīng)看到過這么一段話，再重新翻看文檔使用。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue組件通信的幾種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
路由的本質(zhì)就是一種對應(yīng)關(guān)系，根據(jù)不同的URL請求，返回對應(yīng)不同的資源。那么url地址和真實的資源之間就有一種對應(yīng)的關(guān)系，就是路由2022-11-11
這篇文章主要介紹了詳解VUE里子組件如何獲取父組件動態(tài)變化的值，子組件通過props獲取父組件傳過來的數(shù)據(jù)，子組件存在操作傳過來的數(shù)據(jù)并且傳遞給父組件,需要的朋友可以參考下2018-12-12
vue + elementUI實現(xiàn)省市縣三級聯(lián)動的方法示例
這篇文章主要介紹了vue + elementUI實現(xiàn)省市縣三級聯(lián)動的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了自定義input組件如何實現(xiàn)拖拽文件上傳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue創(chuàng)建全局變量和方法有很多種,下面這篇文章主要給大家介紹了關(guān)于Vue3定義全局變量的方式,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
maptalks+three.js+vue webpack實現(xiàn)二維地圖上貼三維模型操作
這篇文章主要介紹了maptalks+three.js+vue webpack實現(xiàn)二維地圖上貼三維模型操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue3 element plus中el-radio選中之后再次點擊取消選中問題
這篇文章主要介紹了vue3 element plus中el-radio選中之后再次點擊取消選中問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
axios 是一個基于promise用于瀏覽器和 nodejs 的 HTTP 客戶端，這篇文章主要介紹了Vue中axios的基本用法及axios的特征和使用注意細(xì)節(jié)，本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08