1. Vue-img圖片加載失敗時(shí)顯示默認(rèn)圖片
概念：在我們平時(shí)項(xiàng)目的開(kāi)發(fā)過(guò)程中顷窒，經(jīng)常會(huì)做展示網(wǎng)絡(luò)圖片的需求源哩，但是由于網(wǎng)絡(luò)等各種原因?qū)е聢D片加載失敗励烦，無(wú)法展示出來(lái)，UI會(huì)給到我們一張默認(rèn)圖片來(lái)占位漆魔，通常我的處理方式如下:
2.通過(guò)注冊(cè)vue自定義指令 實(shí)現(xiàn)
2.1先創(chuàng)建plugins文件夾，再創(chuàng)建plugins.js 文件
plugins.js
import Vue from 'vue'
//全局注冊(cè)自定義指令矢炼，用于判斷當(dāng)前圖片是否能夠加載成功，可以加載成功則賦值為img的src屬性阿纤，否則使用默認(rèn)圖片
Vue.directive('real-img', async function (el,binding) {//指令名稱為：real-img
let defaultURL = require('@/assets/images/whiteCap/image_touxian.png');//錯(cuò)誤默認(rèn)顯示圖片
let imgURL = binding.value;//獲取圖片地址
if (imgURL) {
let exist = await imageIsExist(imgURL);
if (exist) {
el.setAttribute('src', imgURL);
} else {
el.setAttribute('src', defaultURL);
}
}
})
/**
* 檢測(cè)圖片是否存在
* @param url
*/
let imageIsExist = function(url) {
return new Promise((resolve) => {
var img = new Image();
img.onload = function () {
if (this.complete == true){
resolve(true);
img = null;
}
}
img.onerror = function () {
resolve(false);
img = null;
}
img.src = url;
})
}
- main.js
// 導(dǎo)入全局注冊(cè)自定義指令
import './plugins/plugins.js'
- 使用
正常顯示userInfo.headPortrait，加載失敗則顯示上面的defaultURL圖片欠拾。
<img v-real-img="userInfo.headPortrait"/>
