在main文件内 创建一个 自定义指令及对应方法。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import i18n from './lang/i18n.js';
const app = createApp(App);
app.use(i18n).mount('#app');
app.directive('default-img', async function (el, binding) {
//指令名称为:default-img
let imgURL = binding.value; //获取图片地址
if (imgURL) {
let exist = await hhh(imgURL);
if (exist) {
el.setAttribute('src', imgURL);
}
}
})
/**
* 检测图片是否存在
* @param url
*/
let hhh= function (url) {
return new Promise((resolve) => {
var img = new Image();
img.onload = function () {
resolve(true);
img = null;
}
img.onerror = function () {
resolve(false);
img = null;
}
img.src = url;
})
}
<img class="author" :src="Auatar || '/dist/src' + Auatar" v-default-img="Auatar2" />
src 展示默认图(本地或网图)
v-default-img 原始图片(网图)