JS：通过回调获取img并显示

Question

我正在学习一个教程来更好地理解 AJAX，我不是 webdev，所以我对 JS 不太熟练，但我已经掌握了基础知识，该示例应该能够通过以下方式在屏幕上获取图像回调函数，等待客户端获取图像并在获取后显示它。

我知道回调有点过时了，但由于该示例使用了回调，并且下一个练习是承诺，因此它仍然应该使用回调，对吗？

这是示例代码：

function showImage(url, type, callback) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url)
            xhr.responseType = type;

            xhr.onload = function() {
                callback(xhr.response);
            }

            xhr.send();
}

function createImage() {
            const objectURL = URL.createObjectURL(blob);
            const imageElement = document.createElement('img');
            imageElement.src = objectURL;
            document.body.appendChild(imageElement);
}

showImage('apple.jpg','blob',createImage);

但图像不显示。

我摆弄了一下它，尝试了一些基本的东西，比如网址

./apple.jpg

和

http://localhost/apple.jpg

我尝试像这样将 url 作为参数传递给 createImage

function createImage(url) {
            const objectURL = URL.createObjectURL(blob);
            const imageElement = document.createElement('img');
            imageElement.src = url;
            document.body.appendChild(imageElement);
}

showImage('apple.jpg','blob',createImage('apple.jpg'));

但是图像无法在屏幕上显示，我已经检查了图像是否正确创建，并且在其他帖子上使用

createObjectURL(blob)

几乎是相同的，所以我假设它与阻止的回调一起出现显示的img，但老实说我不知道。

有哪位 JS 高手能看出这有什么问题吗？我确信这非常简单，只是我没有看到它。

Answer 1

您忘记将

blob

定义为参数：

function createImage(blob) <---

function showImage(url, type, callback) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url)
            xhr.responseType = type;

            xhr.onload = function() {
                callback(xhr.response);
            }

            xhr.send();
}

function createImage(blob) {
            const objectURL = URL.createObjectURL(blob);
            const imageElement = document.createElement('img');
            imageElement.src = objectURL;
            document.body.appendChild(imageElement);
}

showImage('https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fHww','blob',createImage);

Answer 2

您必须对代码进行的唯一更改是将 blob 作为参数添加到 createImage() 回调函数中。该函数已尝试使用 blob，并且 showImage() 已将 blob 发送到 createImage()。

function showImage(url, type, callback) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url)
            xhr.responseType = type;

            xhr.onload = function() {
                callback(xhr.response);
            }

            xhr.send();
}

function createImage(blob) {
            const objectURL = URL.createObjectURL(blob);
            const imageElement = document.createElement('img');
            imageElement.src = objectURL;
            document.body.appendChild(imageElement);
}

showImage('apple.jpg','blob',createImage);