远程图片资源跨域问题(vue页面导出pdf时,图片不能显示)

方案一:(实测无效,仍会报跨域问题,不推荐)

<!-- 添加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();
      },
原文地址:https://www.cnblogs.com/FormerWhite/p/15015947.html