方案一:(实测无效,仍会报跨域问题,不推荐)
<!-- 添加crossorigin=“anonymous”属性 同时 后端配置该图片地址的跨域-->
<img crossorigin="anonymous" :src="imgSrc ? imgSrc : ''"/>
结论:
后端是否配置跨域 | 加crossorigin属性 | 不加crossorigin属性 |
---|---|---|
是 | 可以正常加载,准确捕获错误 | 可以正常加载,无法准确捕获错误 |
否 | 无法正常加载 | 可以正常加载,无法准确捕获错误 |
方案二:(base64转码,实测有效,推荐)
<img :src="imgSrc ? imgSrc : ''"/>
// imgUrl 远程图片资源地址
getBase64(imgUrl) {
let that = this
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
var blob = this.response;
console.log("blob", blob)
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
that.imgSrc = e.target.result
};
oFileReader.readAsDataURL(blob);
}
}
xhr.send();
},