Flask目标检测Web应用：SQLite多格式图片复用容器显示问题

1. 修正Flask路由逻辑 #

你的现有路由错误地返回了模板，正确的做法是让路由直接输出图片二进制数据，并携带正确的Content-Type头。另外注意第二个路由里的字段名，你写的annotated_image_name如果对应数据库里的图片数据，应该改成annotated_image_data。同时需要在数据库中存储图片的MIME类型（比如image/jpeg、image/png），这样才能适配多种图片格式。

修改后的路由代码：

import sqlite3
from flask import make_response

@app.route('/display/<image_id>')
def displayImage(image_id):
    conn = sqlite3.connect('image_database.db')
    cursor = conn.cursor()
    # 同时查询图片数据和对应的MIME类型
    cursor.execute('SELECT image_data, mime_type FROM images WHERE id = ?', (image_id,))
    result = cursor.fetchone()
    conn.close()
    if not result:
        return "Image not found", 404
    image_data, mime_type = result
    # 构建响应返回二进制图片
    response = make_response(image_data)
    response.headers.set('Content-Type', mime_type)
    return response

@app.route('/display_detection/<image_id>')
def displayDetection(image_id):
    conn = sqlite3.connect('image_database.db')
    cursor = conn.cursor()
    # 查询标注图数据和对应的MIME类型
    cursor.execute('SELECT annotated_image_data, annotated_mime_type FROM images WHERE id = ?', (image_id,))
    result = cursor.fetchone()
    conn.close()
    if not result:
        return "Annotated image not found", 404
    annotated_image_data, mime_type = result
    response = make_response(annotated_image_data)
    response.headers.set('Content-Type', mime_type)
    return response

2. 简化HTML结构（单图片容器） #

只保留一个img标签，通过按钮点击切换它的src属性来显示不同图片：

<div id="image-container" class="grid-item">
    <img id="displayed-image" src="" width="1000" height="640" alt="Image display area">
</div>

<!-- 控制按钮 -->
<button onclick="showOriginalImage({{ image_id }})">Show image</button>
<button onclick="showAnnotatedImage({{ image_id }})">Show annotated image</button>

3. 添加基础JavaScript切换逻辑 #

不需要复杂的JS，仅需两个函数修改img的src指向：

function showOriginalImage(imageId) {
    document.getElementById('displayed-image').src = `/display/${imageId}`;
}

function showAnnotatedImage(imageId) {
    document.getElementById('displayed-image').src = `/display_detection/${imageId}`;
}

关键补充说明 #

• 数据库需要新增字段：给images表添加mime_type（存储原图的MIME类型）和annotated_mime_type（存储标注图的MIME类型），上传图片时可通过request.files['file'].content_type获取对应类型并存入数据库。
• 这种方式直接返回原始二进制图片，浏览器会自动根据Content-Type识别格式，完美适配多种图片类型，无需手动拼接data URI前缀。
• 按钮点击仅更新图片资源，不会重新渲染整个页面，体验更流畅。

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