項目中經常會遇到圖片加載失敗需要顯示默認圖片的場景，那么如何在圖片src資源加載失敗顯示出默認的圖片呢？
方法一：onerror
<img src="加載圖片Url" onerror="默認圖片路徑"/>
在vue項目中需加
bind:
<img :src="imgUrl" :onerror="defaultImgUrl"/>
export default {
data(){
return {
imgUrl: require('加載圖片路徑'),
defaultImgUrl: require('默認圖片路徑')
}
}
}
方法二：
自定義指令 defaultImg.js:
function install(Vue, options = {}) {
/**
* 檢測圖片是否存在
* @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;
})
}
Vue.directive(options.name || 'default-img', async function (el, binding) {//指令名稱為：v-default-img
const imgURL = el.src;//獲取圖片地址
const defaultURL = binding.value;
if (imgURL) {
const exist = await imageIsExist(imgURL);
if (exist) {
el.setAttribute('src', imgURL);
} else {
el.setAttribute('src', defaultURL);
}
} else {
el.setAttribute('src', defaultURL);
}
})
}
export default { install };
在
main.js使用自定義指令
import defaultImg from './directives/defaultImg';
Vue.use(defaultImg);
在vue項目中使用:
<img :src="imgUrl" v-default-img="defaultImgUtl"/>
