如何在Flask网站中渲染MySQL数据库存储的BLOB格式图片

直接将BLOB类型的二进制图片数据传入模板无法被img标签直接识别，以下是两种可直接落地的实现方式：

方案一：Base64嵌入（适合小体积单图场景） #

不需要额外编写接口，将二进制图片转成Base64编码的Data URI直接填入img的src属性即可。

1. 修改原有/read路由，引入base64模块完成编码，同时将mimetype传入模板：

import base64

@app.route('/read')
def read():
    # 原filter_by(id=Post1.id)写法恒成立，仅会返回表中第一条数据，可按需替换为指定id查询逻辑
    post = Post1.query.first()
    img_b64 = base64.b64encode(post.img).decode('utf-8')
    return render_template('readmanga.html', img_b64=img_b64, mimetype=post.mimetype)

2. 修改模板中class为page的img标签：

<html>
    <head>

    </head>
    <body>
        <div><img src="data:{{ mimetype }};base64,{{ img_b64 }}" alt="漫画页" class="page"></div>
    </body>
</html>

注意：该方案会让HTML文件体积随图片体积增大而膨胀，多图/大图场景下页面加载速度会明显变慢，这类场景请使用方案二。

方案二：独立图片接口（推荐，生产环境通用） #

给图片资源单独编写响应路由，img标签通过src指向该路由，浏览器会独立请求图片资源，和加载普通静态图片逻辑一致，性能更好。

1. 新增专门返回图片流的路由：

from flask import Response, abort

@app.route('/image/<int:post_id>')
def get_post_image(post_id):
    post = Post1.query.get(post_id)
    if not post:
        abort(404)
    return Response(post.img, mimetype=post.mimetype)

2. 修改原有/read路由，仅需将帖子id传入模板：

@app.route('/read')
def read():
    post = Post1.query.first()
    return render_template('readmanga.html', post_id=post.id)

3. 修改模板中class为page的img标签：

<html>
    <head>

    </head>
    <body>
        <div><img src="{{ url_for('get_post_image', post_id=post_id) }}" alt="漫画页" class="page"></div>
    </body>
</html>

额外注意事项 #

• 写入图片数据时请确保mimetype字段存储正确：png格式对应image/png，jpg格式对应image/jpeg，webp格式对应image/webp，mimetype错误会导致图片无法正常解码。
• BLOB字段有长度限制，你当前设置的800000字节仅能存储约800KB以下的图片，若要存储更大尺寸的图片请将字段类型改为LONGBLOB。
• 若图片普遍体积较大，不推荐将图片存在数据库中，更优方案是将图片存储在本地磁盘或专用存储服务，数据库仅存储文件访问路径，可大幅降低数据库压力。

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