首次开发JS Web应用：API返回图片但Overlay无法显示问题求助

首次开发JS Web应用，调用后端Flask API成功获取base64格式图片，但Overlay界面始终无法展示该图片。

相关代码 #

HTML代码 #

<input type="file" id="imageUpload" accept="image/*">
<button id="uploadButton">Upload Image</button>
<button id="openOverlayButton">Open Overlay</button>

<div id="overlay" style="display: none;">
    <button id="closeOverlayButton">×</button>
    <div id="overlayContainer">
        <canvas id="renderCanvas"></canvas>
        <img id="overlayImage" src="" alt="Processed Image Overlay">
        <div id="imageUploadContainer"></div>
        <div id="cameraControls">
            <div class="slider-container">
                <span class="slider-label">Rotation</span>
                <input type="range" id="rotationSlider" class="camera-slider" min="0" max="360" value="0" step="1">
            </div>
        </div>
    </div>
</div>

JS代码 #

function handleImageUpload() {
    const file = imageUpload.files[0];
    if (file) {
        const formData = new FormData();
        formData.append('image', file);

        // 调用API
        fetch('http://127.0.0.1:5000/segment', {
            method: 'POST',
            body: formData,
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json(); // 解析JSON响应
        })
        .then(data => {
            // 获取base64编码的图片
            const imageBase64 = data.image;

            // 显示Overlay
            const overlay = document.getElementById('overlay');
            overlay.style.display = 'block';

            // 在img元素中显示处理后的图片
            const processedImage = document.getElementById('processedImage');
            processedImage.src = `data:image/jpeg;base64,${imageBase64}`; // 使用正确的MIME类型
            processedImage.style.display = 'block'; // 确保图片显示

            // 可选：不需要的话隐藏canvas
            const renderCanvas = document.getElementById('renderCanvas');
            renderCanvas.style.display = 'none';

            // 可选：隐藏overlay图片（如果适用）
            document.getElementById('overlayImage').style.display = 'none';
        })
        .catch(error => {
            console.error('API调用出错:', error);
        });
    } else {
        alert('请上传一张图片');
    }
}

// 为上传按钮绑定事件监听
uploadButton.addEventListener('click', handleImageUpload);

// 添加关闭Overlay的事件监听
document.getElementById('closeOverlayButton').addEventListener('click', () => {
    document.getElementById('overlay').style.display = 'none';
});

Flask API响应代码 #

return jsonify({
            'image': image_base64,
            'angle': float(angle)
        })   

问题原因 #

核心错误是元素ID不匹配：JS代码中尝试获取ID为processedImage的<img>元素，但HTML中仅存在ID为overlayImage的图片元素，导致无法正确设置图片源。此外，代码还错误地将overlayImage设置为隐藏，进一步导致图片无法显示。

修复方案 #

修改JS代码中处理图片显示的部分，将目标元素改为overlayImage，并移除隐藏该元素的代码：

// 替换原有的图片显示逻辑
const overlayImage = document.getElementById('overlayImage');
overlayImage.src = `data:image/jpeg;base64,${imageBase64}`;
overlayImage.style.display = 'block';

// 保留隐藏canvas的逻辑（如果不需要的话）
const renderCanvas = document.getElementById('renderCanvas');
renderCanvas.style.display = 'none';

额外检查项：

• 确认Flask返回的image_base64是否已包含data:image/jpeg;base64,前缀，若已包含则JS中无需重复添加
• 验证base64字符串有效性：将其复制到浏览器地址栏直接访问，确认图片能正常显示
• 检查Overlay的CSS样式，确保其层级、尺寸等不会遮挡图片

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