跨域情况下图片无法访问，展示默认图片

 在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   原始图片（网图）