Vue.directive('real-img', async function (el, binding) {//指令名稱為：real-img
? ? let imgURL = binding.value;//獲取圖片地址
? ? if (imgURL) {
? ? ? ? let exist = await imageIsExist(imgURL);
? ? ? ? if (exist) {
? ? ? ? ? ? el.setAttribute('src', imgURL);
? ? ? ? }
? ? }
})
/**
* 檢測(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;
? ? })
}
然后使用的時(shí)候就特別方便了，因?yàn)槭侨肿?cè)的，所以每個(gè)頁面都可以直接使用
