Django如何从SQLite数据库获取图片并在HTML中展示

1. 后端处理：读取SQLite图片并提供访问接口 #

假设你的SQLite表结构为：表名images，包含id（主键）、image_data（BLOB类型，存储图片二进制）、image_type（存储图片MIME类型，如image/jpeg）。以下以Python Flask为例，其他语言逻辑通用。

1.1 连接SQLite读取图片数据 #

import sqlite3
import base64
from flask import Flask, jsonify, make_response

app = Flask(__name__)

def get_image_from_db(image_id):
    conn = sqlite3.connect('your_database.db')  # 替换为你的数据库路径
    cursor = conn.cursor()
    cursor.execute("SELECT image_data, image_type FROM images WHERE id = ?", (image_id,))
    result = cursor.fetchone()
    conn.close()
    return (result[0], result[1]) if result else (None, None)

1.2 提供两种接口方案 #

方案A：返回Base64编码（适合小图片）

将图片二进制转为Base64字符串，可直接嵌入HTML：

@app.route('/image/base64/<int:image_id>')
def get_image_base64(image_id):
    image_data, image_type = get_image_from_db(image_id)
    if not image_data:
        return jsonify({"error": "Image not found"}), 404
    base64_str = base64.b64encode(image_data).decode('utf-8')
    return jsonify({"src": f"data:{image_type};base64,{base64_str}"})

方案B：返回图片二进制流（适合大图片）

直接返回原始二进制，让浏览器识别为图片资源：

@app.route('/image/raw/<int:image_id>')
def get_image_raw(image_id):
    image_data, image_type = get_image_from_db(image_id)
    if not image_data:
        return "Image not found", 404
    response = make_response(image_data)
    response.headers['Content-Type'] = image_type
    return response

2. 前端HTML展示图片 #

方案A：使用Base64嵌入 #

通过AJAX请求接口获取Base64数据，赋值给<img>的src：

<!DOCTYPE html>
<html>
<head>
    <title>展示数据库图片</title>
</head>
<body>
    <img id="dbImage" alt="数据库图片">
    <script>
        // 替换为目标图片ID
        fetch('/image/base64/1')
            .then(res => res.json())
            .then(data => {
                if (data.src) document.getElementById('dbImage').src = data.src;
            })
            .catch(err => console.log('加载失败:', err));
    </script>
</body>
</html>

方案B：直接引用接口URL #

将后端二进制流接口的URL直接作为<img>的src，浏览器自动加载：

<!DOCTYPE html>
<html>
<head>
    <title>展示数据库图片</title>
</head>
<body>
    <!-- 替换为目标图片ID -->
    <img src="/image/raw/1" alt="数据库图片">
</body>
</html>

注意事项 #

• 确保SQLite中image_data字段为BLOB类型，存储的是图片原始二进制数据，而非文件路径。
• 大图片优先选择方案B，Base64编码会使数据体积增加约30%，影响加载效率。
• 其他后端语言（如PHP、Node.js）逻辑一致：连接SQLite读取BLOB数据，返回对应格式的响应即可。

内容的提问来源于stack exchange，提问作者sai sameer kumar