AJAX回调加载图片无法显示，请求JavaScript问题排查

你的代码核心问题集中在回调函数的参数接收和传递逻辑上，具体如下：

问题1：回调函数未接收参数，使用未定义变量 #

第一个版本的createImage函数直接使用了未定义的blob变量。showImage的onload回调会把请求得到的Blob对象作为参数传给createImage，但你的createImage没有声明参数来接收这个值，自然无法生成正确的Object URL。

问题2：错误传递回调函数（直接执行而非传递函数引用） #

第二个版本中，你写了showImage('apple.jpg','blob',createImage('apple.jpg'))，这会立即执行createImage('apple.jpg')，并把它的返回值（你的函数没有return，实际是undefined）传给showImage作为回调。回调函数需要传递的是函数本身，而不是函数执行后的结果。

修正后的代码 #

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

    xhr.onload = function() {
        // 仅在请求成功时调用回调，避免错误情况
        if (xhr.status === 200) {
            callback(xhr.response);
        }
    }

    xhr.send();
}

function createImage(blob) {
    // 接收回调参数传入的Blob对象
    const objectURL = URL.createObjectURL(blob);
    const imageElement = document.createElement('img');
    imageElement.src = objectURL;
    document.body.appendChild(imageElement);
    
    // 可选：图片加载完成后释放Object URL，避免内存泄漏
    imageElement.onload = function() {
        URL.revokeObjectURL(objectURL);
    }
}

// 传递函数引用作为回调，不要加括号执行
showImage('apple.jpg','blob',createImage);

额外说明 #

1. 图片路径：如果HTML文件和apple.jpg在同一目录，'apple.jpg'或'./apple.jpg'均有效；使用本地服务器时，http://localhost/apple.jpg需要确保服务器上确实存在该文件。
2. 请求状态判断：新增xhr.status === 200的判断，避免请求失败时传入错误的response导致报错。
3. 内存管理：新增URL.revokeObjectURL，图片加载完成后释放Object URL，减少浏览器内存占用。

内容的提问来源于stack exchange，提问作者Anacardo