在Flask应用开发中，将后端Python变量动态传递到HTML页面是实现交互功能的基础需求，尤其是涉及图像展示和实时内容更新的场景，需要结合模板引擎、数据编码和异步通信等技术实现。本文将从基础变量传递到复杂场景实现，逐步讲解完整的解决方案。
基础变量传递：从Python到HTML模板
Flask使用Jinja2作为默认模板引擎，通过render_template函数可以将Python变量传递到HTML模板中，在模板中使用双大括号{{ 变量名 }}即可渲染变量内容。
简单文本变量传递示例
首先创建Flask应用，定义路由并传递变量到模板：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
# 定义需要传递的Python变量
user_name = "测试用户"
page_title = "动态渲染示例"
return render_template('index.html', username=user_name, title=page_title)
if __name__ == '__main__':
app.run(debug=True)
对应的HTML模板index.html内容如下，通过双大括号渲染传递的变量：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>欢迎, {{ username }}</h1>
</body>
</html>
动态渲染图像数据
图像数据无法直接作为普通变量传递，通常需要将图像转换为Base64编码的字符串，或者提供独立的图像路由，在HTML中通过<img>标签引用。
Base64编码渲染图像
后端将图像文件或二进制数据转换为Base64字符串，传递到前端后直接嵌入<img>的src属性：
import base64
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/image_demo')
def image_demo():
# 读取图像二进制数据，这里以本地图像为例
with open('test_image.jpg', 'rb') as f:
image_bytes = f.read()
# 转换为Base64字符串
image_base64 = base64.b64encode(image_bytes).decode('utf-8')
# 拼接Data URI格式
image_data = f"data:image/jpeg;base64,{image_base64}"
return render_template('image.html', image_data=image_data)
if __name__ == '__main__':
app.run(debug=True)
前端模板image.html中渲染图像：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图像渲染示例</title>
</head>
<body>
<h2>动态渲染的图像</h2>
<img src="{{ image_data }}" alt="动态图像" style="max-width: 500px;">
</body>
</html>
独立图像路由渲染
如果图像数据较大或需要复用，可以定义独立的图像路由，返回图像二进制数据，前端通过路由地址引用：
from flask import Flask, send_file
import io
app = Flask(__name__)
@app.route('/get_image')
def get_image():
# 模拟生成图像二进制数据，实际场景可能是从数据库或实时计算获取
with open('test_image.jpg', 'rb') as f:
image_bytes = f.read()
return send_file(io.BytesIO(image_bytes), mimetype='image/jpeg')
@app.route('/image_route_demo')
def image_route_demo():
return render_template('image_route.html')
if __name__ == '__main__':
app.run(debug=True)
前端模板image_route.html内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>独立路由图像示例</title>
</head>
<body>
<h2>通过独立路由加载的图像</h2>
<img src="/get_image" alt="路由图像" style="max-width: 500px;">
</body>
</html>
实现内容实时更新
实时更新需要后端变量变化后主动同步到前端，常见的实现方式有前端轮询和WebSocket两种。
前端轮询方案
前端定时向后端发送请求获取最新变量，适合更新频率不高的场景，实现简单无需额外依赖。
后端定义获取最新数据的路由：
from flask import Flask, render_template, jsonify
import time
app = Flask(__name__)
# 模拟动态变化的变量
current_data = {"timestamp": time.time(), "value": 0}
@app.route('/')
def index():
return render_template('poll.html')
@app.route('/get_latest_data')
def get_latest_data():
# 模拟更新变量
current_data["timestamp"] = time.time()
current_data["value"] += 1
return jsonify(current_data)
if __name__ == '__main__':
app.run(debug=True)
前端模板poll.html使用JavaScript定时请求：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>轮询实时更新示例</title>
</head>
<body>
<h2>实时更新数据</h2>
<p>当前值: <span id="value">0</span></p>
<p>时间戳: <span id="timestamp">0</span></p>
<script>
function fetchLatestData() {
fetch('/get_latest_data')
.then(response => response.json())
.then(data => {
document.getElementById('value').innerText = data.value;
document.getElementById('timestamp').innerText = data.timestamp;
});
}
// 每2秒请求一次
setInterval(fetchLatestData, 2000);
// 初始加载一次
fetchLatestData();
</script>
</body>
</html>
WebSocket实时推送方案
使用Flask-SocketIO实现双向通信，后端变量变化后主动推送到前端，延迟更低，适合高频更新场景。
首先安装依赖：pip install flask-socketio，后端实现如下：
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
import time
import threading
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'
socketio = SocketIO(app)
# 模拟动态变化的变量
current_value = 0
@app.route('/')
def index():
return render_template('websocket.html')
# 后台线程定时更新变量并推送
def background_update():
global current_value
while True:
time.sleep(1)
current_value += 1
socketio.emit('update_data', {'value': current_value, 'timestamp': time.time()}, namespace='/test')
@socketio.on('connect', namespace='/test')
def test_connect():
# 客户端连接后启动后台更新线程
thread = threading.Thread(target=background_update)
thread.daemon = True
thread.start()
if __name__ == '__main__':
socketio.run(app, debug=True)
前端模板websocket.html实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>WebSocket实时更新示例</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
</head>
<body>
<h2>WebSocket实时更新数据</h2>
<p>当前值: <span id="value">0</span></p>
<p>时间戳: <span id="timestamp">0</span></p>
<script>
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
socket.on('update_data', function(data) {
document.getElementById('value').innerText = data.value;
document.getElementById('timestamp').innerText = data.timestamp;
});
</script>
</body>
</html>
注意事项
- Base64编码会增加约33%的数据体积，大图像建议使用独立路由方式渲染。
- 轮询间隔需要根据业务场景设置，避免过于频繁请求增加服务器压力。
- WebSocket方案需要服务器支持异步模式，生产环境建议使用eventlet或gevent作为异步后端。
- 渲染图像时需要注意MIME类型与图像格式匹配，避免浏览器无法解析。
FlaskPython变量渲染HTML动态展示实时更新图像渲染修改时间：2026-06-17 17:33:34