已实现从MySQL读取图片，如何通过HTML页面展示该图片？

看起来你已经搞定了从数据库读取图片并本地显示的环节，要把它放到网页上其实很简单，核心就是让浏览器能识别图片数据。下面给你两种常用的实现方案：

方案一：生成静态HTML文件（适合快速演示） #

你可以修改现有Python代码，把图片转换成Data URI格式（一种直接嵌入HTML的图片编码方式），然后自动生成包含图片的HTML文件。

修改后的代码如下：

import MySQLdb
import base64

# 数据库连接与查询（和你原来的逻辑一致）
db = MySQLdb.connect(host="localhost", user="root", passwd="root", db="test")
sql1 = 'select img from images where id=1'
cursor = db.cursor()
cursor.execute(sql1)
data2 = cursor.fetchall()
cursor.close()
db.close()

# 将二进制图片数据转为base64编码，再拼接成Data URI
img_base64 = base64.b64encode(data2[0][0]).decode('utf-8')
# 注意：这里的image/jpeg要和你存储的图片格式匹配，PNG就改成image/png
data_uri = f"data:image/jpeg;base64,{img_base64}"

# 生成HTML内容
html_content = f"""
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数据库图片展示</title>
</head>
<body>
    <h2>从MySQL读取的图片</h2>
    <img src="{data_uri}" alt="数据库存储的图片" style="max-width: 800px;">
</body>
</html>
"""

# 把HTML写入文件
with open('image_show.html', 'w', encoding='utf-8') as f:
    f.write(html_content)

运行这段代码后，会在当前目录生成image_show.html，直接用浏览器打开就能看到图片了。

方案二：后端接口动态返回（适合Web应用） #

如果是做动态网站，推荐用后端接口的方式返回图片，前端通过URL请求加载。这里用轻量的Flask框架举例：

1. 先安装Flask：

pip install flask

2. 编写后端代码（比如命名为app.py）：

from flask import Flask, Response
import MySQLdb

app = Flask(__name__)

@app.route('/image/<int:img_id>')
def get_image(img_id):
    # 连接数据库查询图片
    db = MySQLdb.connect(host="localhost", user="root", passwd="root", db="test")
    sql = f'select img from images where id={img_id}'
    cursor = db.cursor()
    cursor.execute(sql)
    img_data = cursor.fetchone()
    cursor.close()
    db.close()

    if img_data:
        # 返回二进制图片流，mimetype要和图片格式匹配
        return Response(img_data[0], mimetype='image/jpeg')
    else:
        return "未找到对应图片", 404

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

3. 编写前端HTML文件（比如index.html）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态加载数据库图片</title>
</head>
<body>
    <h2>动态加载的图片</h2>
    <!-- 这里的URL对应Flask接口地址 -->
    <img src="http://localhost:5000/image/1" alt="数据库图片" style="max-width: 800px;">
</body>
</html>

启动Flask应用后，打开index.html就能看到从接口加载的图片了。

小提醒 #

• 一定要确保代码里的mimetype（比如image/jpeg）和你存储在MySQL里的图片格式一致，否则图片可能无法正常显示。
• 如果图片体积很大，Data URI的方式会让HTML文件变得臃肿，这种情况下优先用后端接口返回二进制流的方案。

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