如何将图片存入SQL数据库并在Flask网页展示（含BLOB转图片方法）

一、将JPG存入SQL数据库的BLOB字段 #

先把本地JPG文件读取为二进制数据，再插入到SQL的BLOB字段中。以下以SQLite为例（MySQL/PostgreSQL逻辑类似，仅连接语法有差异）：

import sqlite3

# 连接数据库（不存在则自动创建）
conn = sqlite3.connect('images.db')
cursor = conn.cursor()

# 创建图片存储表（不存在则创建）
cursor.execute('''
    CREATE TABLE IF NOT EXISTS images (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        img_data BLOB,
        filename TEXT
    )
''')

# 读取JPG文件为二进制流
with open('test.jpg', 'rb') as f:
    img_binary = f.read()

# 插入数据到数据库
cursor.execute('INSERT INTO images (img_data, filename) VALUES (?, ?)', (img_binary, 'test.jpg'))
conn.commit()
conn.close()

二、在Flask中展示数据库中的图片 #

提供两种常用实现方式，可根据图片大小和需求选择：

方式1：通过独立路由返回图片数据 #

适合较大图片，通过Flask路由直接返回二进制图片数据，HTML的img标签指向该路由地址。

Flask后端代码

from flask import Flask, render_template, make_response
import sqlite3

app = Flask(__name__)

@app.route('/')
def index():
    # 获取所有图片的ID和文件名，用于前端列表展示
    conn = sqlite3.connect('images.db')
    cursor = conn.cursor()
    cursor.execute('SELECT id, filename FROM images')
    images = cursor.fetchall()
    conn.close()
    return render_template('index.html', images=images)

@app.route('/image/<int:image_id>')
def get_image(image_id):
    # 根据ID从数据库取出图片二进制数据
    conn = sqlite3.connect('images.db')
    cursor = conn.cursor()
    cursor.execute('SELECT img_data FROM images WHERE id = ?', (image_id,))
    img_data = cursor.fetchone()[0]
    conn.close()
    
    # 返回图片响应，设置正确的Content-Type
    response = make_response(img_data)
    response.headers['Content-Type'] = 'image/jpeg'
    return response

if __name__ == '__main__':
    app.run(debug=True)

前端模板（templates/index.html）

<!DOCTYPE html>
<html>
<head>
    <title>数据库图片展示</title>
</head>
<body>
    <h1>存储的图片列表</h1>
    {% for img in images %}
        <div style="margin: 20px 0;">
            <p>{{ img[1] }}</p>
            <img src="/image/{{ img[0] }}" alt="{{ img[1] }}" width="300">
        </div>
    {% endfor %}
</body>
</html>

方式2：将BLOB转为Base64直接嵌入HTML #

无需额外路由，直接把图片编码为Base64字符串嵌入到img标签的src中，适合小型图片（避免频繁请求）。

Flask后端代码

from flask import Flask, render_template
import sqlite3
import base64

app = Flask(__name__)

@app.route('/')
def index():
    conn = sqlite3.connect('images.db')
    cursor = conn.cursor()
    cursor.execute('SELECT img_data, filename FROM images')
    images = []
    for img_data, filename in cursor.fetchall():
        # 将二进制图片转为Base64字符串
        img_base64 = base64.b64encode(img_data).decode('utf-8')
        images.append({'filename': filename, 'base64': img_base64})
    conn.close()
    return render_template('index.html', images=images)

if __name__ == '__main__':
    app.run(debug=True)

前端模板（templates/index.html）

<!DOCTYPE html>
<html>
<head>
    <title>数据库图片展示</title>
</head>
<body>
    <h1>存储的图片列表</h1>
    {% for img in images %}
        <div style="margin: 20px 0;">
            <p>{{ img.filename }}</p>
            <img src="data:image/jpeg;base64,{{ img.base64 }}" alt="{{ img.filename }}" width="300">
        </div>
    {% endfor %}
</body>
</html>

注意事项 #

• 大图片不建议使用Base64方式，会大幅增加HTML文件体积，影响页面加载速度。
• 部分数据库的BLOB字段有大小限制，比如MySQL的BLOB最大仅支持64KB，存储更大图片需改用MEDIUMBLOB或LONGBLOB类型。

内容的提问来源于stack exchange，提问作者T. Ray