如何在Python Flask中展示SQL数据库Blob存储的用户头像

后端接口实现 #

编写一个专门返回头像的接口，从数据库读取Blob数据并输出正确的图片响应：

from flask import Flask, session, make_response
import sqlite3

app = Flask(__name__)
app.secret_key = '你的秘钥'

@app.route('/user/avatar')
def user_avatar():
    # 从session获取当前登录用户ID
    user_id = session.get('user_id')
    if not user_id:
        # 返回默认头像
        with open('static/default_avatar.png', 'rb') as f:
            default_img = f.read()
        resp = make_response(default_img)
        resp.headers['Content-Type'] = 'image/png'
        return resp
    
    # 查询数据库的Blob字段
    conn = sqlite3.connect('你的数据库文件.db')
    cursor = conn.cursor()
    cursor.execute('SELECT ProfilePicture FROM Users WHERE UserID = ?', (user_id,))
    blob_data = cursor.fetchone()[0]
    conn.close()
    
    if not blob_data:
        # 无头像时返回默认图
        with open('static/default_avatar.png', 'rb') as f:
            default_img = f.read()
        resp = make_response(default_img)
        resp.headers['Content-Type'] = 'image/png'
        return resp
    
    # 返回Blob图片，注意匹配实际存储的格式（比如jpg就用image/jpeg）
    resp = make_response(blob_data)
    resp.headers['Content-Type'] = 'image/png'
    # 设置缓存优化加载速度
    resp.headers['Cache-Control'] = 'public, max-age=86400'
    return resp

前端展示头像 #

在Jinja2模板里直接调用接口URL，再加CSS改成Twitter式圆形头像：

<!-- 页面中的头像区域 -->
<div class="user-avatar">
    <img src="{{ url_for('user_avatar') }}" alt="用户头像" class="avatar-circle">
</div>

对应的CSS样式：

.avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e1e8ed;
}

关键注意点 #

• 存储Blob时的图片格式要和接口返回的Content-Type一致，比如上传的是JPG就把响应头改成image/jpeg
• 提前准备一张默认头像（放在static目录下），避免用户无头像时页面出现图片加载失败的情况
• 如果用ORM（比如SQLAlchemy），只需把原生SQL查询换成对应的ORM查询逻辑即可

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