Javascript 如何在js/HTML中显示api返回的图像？

我想使用纯Java脚本在HTML页面上显示GET请求中的pdf文件。 api返回一个pdf文件。 以下是api的邮递员回复：

以下是我目前的代码：

function getImg() {
    var url = "https://api.herokuapp.com/download"
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.setRequestHeader("Authorization", "JWT " + localStorage.getItem('token'));
    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    xhr.send(null);
    xhr.addEventListener('load', function() {
        var responseObject = this.response;
        var myImage = new Image();
        myImage = this.response;
        document.body.appendChild(myImage);
    });
}

我得到这个错误：

TypeError:Node.appendChild的参数1不是对象

如何做到这一点？ 非常感谢您的帮助。

---

BR KRESTEN

以下是我解决这个问题的方法：

function getImg() {
    var url = "https://secure.gravatar.com/avatar/3167fa1b890ffe735393de7d6296e32d?s=58&d=mm&r=g"
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    // xhr.setRequestHeader("Authorization", "JWT " + localStorage.getItem('token'));
    // xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    xhr.send(null);
    xhr.addEventListener('load', function() {
        if (this.status === 200) {
            let blob = this.response;
            let myImage = new Image();
            myImage.src = window.URL.createObjectURL(blob);
            document.body.appendChild(myImage);
        }
    });
}