Flask项目中如何在HTML页面显示SQL数据库存储的图片

1. 在Flask中添加图片获取路由 #

需要创建单独路由，根据图片唯一标识（比如数据库中的id）读取图片字节数据，并返回带正确响应头的内容：

from flask import Flask, Response, url_for
# 替换成你的数据库操作模块
import your_db_module  

app = Flask(__name__)

# 假设图片表字段：id(主键)、img(字节数据)、mimetype(图片类型，如image/png)
@app.route('/image/<int:image_id>')
def get_image(image_id):
    # 查询对应图片记录
    img_record = your_db_module.get_image_by_id(image_id)
    if not img_record:
        return "图片不存在", 404
    # 返回图片响应，指定正确的内容类型
    return Response(img_record.img, mimetype=img_record.mimetype)

如果数据库没存mimetype，可根据图片类型默认设置（比如所有图片都是JPG）：

return Response(img_record.img, mimetype='image/jpeg')

2. 修改HTML模板的img标签 #

把原来的静态链接替换为动态路由生成的URL：

<!-- 原静态链接示例 -->
<!-- <img src="/static/photo.jpg" alt="示例图片"> -->

<!-- 修改后的动态渲染代码 -->
<img src="{{ url_for('get_image', image_id=item['id']) }}" alt="展示图片">

3. 为什么直接用{{item['img']}}不行？ #

浏览器<img>的src只接受两种格式：URL/相对路径，或Base64编码的Data URI。直接输出字节数据会被解析成乱码文本，无法识别为图片。如果不想加额外路由，可改用Data URI方案：

可选方案：用Data URI渲染 #

在视图函数中将图片字节编码为Base64字符串，拼接成Data URI格式：

import base64

# 查询数据时处理图片
def fetch_items():
    items = your_db_module.get_all_items()
    for item in items:
        # 字节转Base64字符串
        img_base64 = base64.b64encode(item['img']).decode('utf-8')
        # 拼接Data URI（根据实际图片类型修改image/jpeg）
        item['img_uri'] = f"data:image/jpeg;base64,{img_base64}"
    return items

然后在HTML中直接使用：

<img src="{{ item['img_uri'] }}" alt="展示图片">

注意：Data URI会增大HTML体积，适合小图片；大图片推荐用单独路由方案，性能更优。

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