Python Flask框架中显示图像到Web页面的实现方法
发布时间：2026-10-13| 5人浏览过
本文介绍如何在Python Flask框架中将图像显示到Web页面。通过Matplotlib绘制图像，利用io.BytesIO和base64编码将图像转换为URL，并在HTML模板中通过img标签展示。提供了完整的代码示例和GitHub资源链接，帮助开发者实现动态图像展示功能。
Flask框架中图像显示的实现代码
具体实现代码如下所示。
文件名为webfig1.py。
from flask import Flask
from flask import render_template
import matplotlib.pyplot as plt
import io
import base64
app = Flask(__name__)
@app.route('/')
def build_plot():
img = io.BytesIO()
y = [1,2,3,4,5]
x = [0,2,1,3,4]
plt.plot(x,y)
plt.savefig(img, format='png')
img.seek(0)
plot_url = base64.b64encode(img.getvalue()).decode()
return render_template('plot.html', plot_url=plot_url)
if __name__ == '__main__':
app.debug = True
app.run()HTML模板文件名为plot.html。
<!DOCTYPE html>
<html>
<title> Plot</title>
<body>
<img src="data:image/png;base64, {{ plot_url }}">
</body>
</html>图像生成与传递流程
首先使用Python的Matplotlib库绘制x和y坐标的图像，随后通过一系列命令将其转换为plot_url变量，最后将该变量传递给plot.html模板进行渲染展示。
相关代码托管在GitHub仓库：https://github.com/qingnvsue/flask，具体位于webfig文件夹中。
动态正弦函数图像展示示例
在实际应用中，我的程序允许用户在网页输入正弦函数的幅度、频率以及自变量范围等参数，随后系统绘制该正弦函数图像，并将其显示在Web页面上，效果如图所示。
相关代码托管在GitHub仓库：https://github.com/qingnvsue/flask，具体位于sin文件夹中。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。
