如何修改JavaScript代码以显示后端返回的处理后图片？

原代码的核心问题是错误地将后端返回的图片二进制数据当作JSON解析——后端返回的是图片文件（如JPG/PNG），并非JSON格式，response.json()会直接解析失败，自然无法显示图片。

以下是修改后的完整代码：

function sendImageToBackend(formData) {
    fetch('my-back-end-url', {
        method: 'POST',
        body: formData,
    })
    .then((response) => {
        if (!response.ok) {
            throw new Error('Error uploading image');
        }
        // 将二进制响应解析为Blob（图片类型的二进制对象）
        return response.blob();
    })
    .then((imageBlob) => {
        // 处理返回的图片Blob并展示
        displayResponseImage(imageBlob);
    })
    .catch((error) => {
        console.error('Error uploading image:', error);
        alert('Error uploading image. Please try again later.');
    });
}

function displayResponseImage(imageBlob) {
    responseContainer.innerHTML = '';

    const heading = document.createElement('h2');
    heading.textContent = 'Processed Image:';
    responseContainer.appendChild(heading);

    // 创建img元素用于展示图片
    const imgElement = document.createElement('img');
    // 将Blob转换为浏览器可识别的临时URL
    const imageUrl = URL.createObjectURL(imageBlob);
    imgElement.src = imageUrl;
    // 可选：设置图片自适应样式
    imgElement.style.maxWidth = '100%';
    imgElement.style.height = 'auto';

    responseContainer.appendChild(imgElement);

    // 页面卸载时释放临时URL，避免内存泄漏
    window.addEventListener('unload', () => {
        URL.revokeObjectURL(imageUrl);
    });
}

关键修改说明： #

• 替换response.json()为response.blob()：Blob是专门处理二进制文件的对象，适配图片这类资源的接收需求。
• 重写展示逻辑：不再处理JSON数据，转而创建<img>元素，通过URL.createObjectURL()将Blob转换为浏览器可加载的临时URL，赋值给img的src属性实现展示。
• 添加内存清理：用URL.revokeObjectURL()在页面卸载时清理临时URL，防止不必要的内存占用。

额外注意： #

• 确保FastAPI后端返回正确的图片响应，比如使用FileResponse返回处理后的图片，并设置对应media_type（如image/jpeg或image/png）。
• 检查Cloud Run的CORS配置，确保允许前端域名发起请求，避免跨域错误。

内容的提问来源于stack exchange，提问作者Thanh Long Phan