如何在Flask模板中展示MySQL数据库的LargeBinary类型图片？

这个问题我碰到过好几次，核心是模板里的<img>标签没法直接解析数据库里的二进制数据，得做一层转换或者单独提供图片的访问接口。下面给你两种可行的方案，你可以根据图片大小和需求选择：

方案一：使用Data URI（适合小图片） #

Data URI可以把二进制图片直接嵌入到HTML里，不需要额外的请求。步骤如下：

1. 优化你的模型（可选但推荐） #

首先建议给模型加一个mimetype字段，用来存储图片的类型（比如image/jpeg、image/png），这样前端能正确识别图片格式：

class ginfo(db.Model):
    id=db.Column(db.Integer,primary_key=True)
    name=db.Column(db.String(20))
    comment=db.Column(db.String(1000))
    picdata=db.Column(db.LargeBinary)
    mimetype=db.Column(db.String(50))  # 新增：存储图片MIME类型

2. 插入数据时保存MIME类型 #

上传文件时，从file对象里获取MIME类型并存入数据库：

name=request.form['name']
comment=request.form['comment']
file=request.files['inputFile']

if file and file.filename:  # 确保文件存在
    pic_data = file.read()
    mime_type = file.mimetype  # 获取图片类型
    new_ginfo = ginfo(name=name, comment=comment, picdata=pic_data, mimetype=mime_type)
    db.session.add(new_ginfo)
    db.session.commit()

3. 视图函数中转换二进制为Base64 #

在渲染首页的视图里，把数据库中的二进制图片转成Base64编码的字符串，传给模板：

from base64 import b64encode

@app.route('/')
def index():
    items = ginfo.query.all()
    # 给每个有图片的item添加base64编码后的字段
    for item in items:
        if item.picdata:
            item.pic_base64 = b64encode(item.picdata).decode('utf-8')
    return render_template('index.html', items=items)

4. 模板中渲染图片 #

在模板里用<img>标签的src属性直接使用Data URI：

{% for item in items %}
    <div class="item">
        <h3>{{ item.name }}</h3>
        <p>{{ item.comment }}</p>
        {% if item.pic_base64 %}
            <img src="data:{{ item.mimetype }};base64,{{ item.pic_base64 }}" alt="{{ item.name }}">
        {% endif %}
    </div>
{% endfor %}

方案二：单独的图片路由（适合大图片） #

如果图片比较大，用Data URI会让HTML体积过大，这时候推荐写一个单独的路由来返回图片响应，浏览器通过URL请求图片。

1. 同样优化模型（添加mimetype字段） #

和方案一的第一步一样，确保模型有mimetype字段（如果没加的话，也可以在路由里默认一个类型，比如image/jpeg，但不推荐）。

2. 编写图片路由 #

新增一个路由，根据item的ID返回对应的图片二进制数据：

from flask import Response, abort

@app.route('/image/<int:item_id>')
def get_image(item_id):
    item = ginfo.query.get_or_404(item_id)
    if not item.picdata:
        abort(404)  # 没有图片返回404
    # 返回图片响应，指定MIME类型
    return Response(item.picdata, mimetype=item.mimetype or 'image/jpeg')

3. 模板中引用图片URL #

在模板里，用url_for生成图片路由的URL，作为<img>的src：

{% for item in items %}
    <div class="item">
        <h3>{{ item.name }}</h3>
        <p>{{ item.comment }}</p>
        {% if item.picdata %}
            <img src="{{ url_for('get_image', item_id=item.id) }}" alt="{{ item.name }}">
        {% endif %}
    </div>
{% endfor %}

两种方案对比 #

• Data URI：无需额外HTTP请求，适合小图标、缩略图；缺点是会增加HTML文件大小，图片无法被浏览器缓存。
• 单独路由：浏览器可以缓存图片，适合大尺寸图片；需要额外的请求，但性能更优。

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