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)文章
vue2實現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼
這篇文章主要介紹了vue2實現(xiàn)搜索結(jié)果中的搜索關(guān)鍵字高亮的代碼,需要的朋友可以參考下2018-08-08
vue element 中的table動態(tài)渲染實現(xiàn)（動態(tài)表頭）
這篇文章主要介紹了vue element 中的table動態(tài)渲染實現(xiàn)（動態(tài)表頭），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue require.context全局注冊組件的具體實現(xiàn)
本文主要介紹了vue require.context全局注冊組件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
今天在寫項目掉接口的時候有一個接口需要到了用戶的ip地址,查了半天覺得這個方法不錯,下面這篇文章主要給大家介紹了關(guān)于vue前端通過騰訊接口獲取用戶ip的相關(guān)資料,需要的朋友可以參考下2022-12-12
凡事有好就又壞，想必大家都知道Vue的作用與優(yōu)點，但是使用的規(guī)程中也總是有很多問題，接下來小編就來向大家講解使用Vue時應(yīng)注意的一些問題，希望能幫助到大家2021-09-09
vue.js是MVVM結(jié)構(gòu)的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。2016-12-12
這篇文章主要介紹了requirejs + vue 項目搭建詳解,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了利用vue3+ts實現(xiàn)管理后臺(增刪改查),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue3+element-plus 實現(xiàn)動態(tài)菜單和動態(tài)路由的渲染的項目實踐
本文主要介紹了vue3+element-plus 實現(xiàn)動態(tài)菜單和動態(tài)路由的渲染的項目實踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
vue項目實現(xiàn)通過ip地址訪問和localhost訪問方式
這篇文章主要介紹了vue項目實現(xiàn)通過ip地址訪問和localhost訪問方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09