本教程详细介绍了如何在 Flask 应用中高效地显示和动态更新图片。内容涵盖 Flask 静态文件服务、HTML 模板中图片路径的正确引用、利用 JavaScript 实现客户端图片定时刷新（包括缓存处理），以及服务器端图片上传处理的完整流程，旨在帮助开发者构建具备图片管理功能的 Web 应用。
1. Flask 基础：静态文件服务与图片显示
在 Flask 应用中，静态文件（如 CSS、JavaScript、图片等）通常通过一个名为 static 的特殊文件夹来提供。在 HTML 模板中，url_for() 函数结合 static 端点是生成静态文件正确 URL 的标准方式。
1.1 项目结构
为了清晰地组织文件，建议采用以下项目结构：
. ├── app.py # Flask 主应用文件 ├── static │ └── images │ └── chart.png # 示例图片文件 └── templates └── chart.html # HTML 模板文件
1.2 Flask 应用配置与路由
在 app.py 中，我们需要配置静态文件目录，并定义一个路由来渲染包含图片的 HTML 页面。
import os
from flask import Flask, render_template
app = Flask(__name__)
# 配置图片上传目录，该目录位于 'static' 文件夹下
app.config['UPLOAD_FOLDER'] = os.path.join('static', 'images')
@app.route("/")
def running():
"""根路由，简单返回应用运行状态"""
return "<p>Website running!</p>"
@app.route("/chart")
def show_img():
"""
显示图片的路由。
将图片的相对路径（相对于 static 文件夹）传递给模板。
"""
# 假设图片名为 chart.png，且位于 static/images 目录下
# url_for('static', ...) 会自动处理 'static/' 部分
image_path_in_static = os.path.join('images', 'chart.png')
return render_template("chart.html", user_image=image_path_in_static)
if __name__ == "__main__":
# 启动 Flask 应用，开启 debug 模式方便开发
app.run(port=3000, debug=True)1.3 HTML 模板中的图片引用
在 templates/chart.html 中，使用 url_for() 函数来引用 user_image 变量，确保图片路径正确解析。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态图片展示</title>
</head>
<body>
<h1>当前图片</h1>
<!-- 使用 url_for 结合 user_image 变量正确引用图片 -->
<img id="dynamicImage" src="{{ url_for('static', filename=user_image) }}" alt="Chart Image"/>
</body>
</html>此时，访问 http://localhost:3000/chart 路由即可在浏览器中看到 chart.png 图片。
2. 客户端定时刷新图片
当服务器端的图片文件内容发生变化，但文件名保持不变时，浏览器可能会因为缓存机制而继续显示旧图片。为了强制浏览器重新加载最新图片，我们需要利用 JavaScript 定时更新 <img> 标签的 src 属性，并在 URL 中添加一个唯一的查询参数（例如时间戳）来“破坏”缓存。
2.1 修改 chart.html 添加 JavaScript 刷新逻辑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态图片展示</title>
</head>
<body>
<h1>当前图片</h1>
<img id="dynamicImage" src="{{ url_for('static', filename=user_image) }}" alt="Chart Image"/>
<script>
// 获取图片元素
const dynamicImage = document.getElementById('dynamicImage');
// 获取原始图片路径，用于构建新的 URL。
// .split('?')[0] 用于移除可能已存在的查询参数。
const originalSrc = dynamicImage.src.split('?')[0];
// 每5秒刷新一次图片
setInterval(() => {
// 生成一个当前时间戳作为查询参数，强制浏览器重新加载图片，避免缓存
const newSrc = originalSrc + '?' + new Date().getTime();
dynamicImage.src = newSrc;
console.log('Image refreshed:', newSrc);
}, 5000); // 5000毫秒 = 5秒
</script>
</body>
</html>通过上述 JavaScript 代码，每隔 5 秒，浏览器会请求一个新的图片 URL（因为 URL 上的时间戳不同），从而绕过浏览器缓存，显示最新的图片内容。
3. 服务器端图片上传与管理
如果图片是由用户上传或服务器动态生成并需要替换现有文件，我们需要在 Flask 应用中实现文件上传功能。这涉及到接收文件、验证文件类型、安全地保存文件等步骤。
3.1 扩展 app.py：实现文件上传功能
我们需要引入 request, redirect, url_for, flash 和 werkzeug.utils.secure_filename。为了演示目的，我们使用一个全局变量 current_file 来跟踪当前显示的图片，但在生产环境中，应避免使用全局变量，而应采用数据库或会话管理来存储文件信息。
import os
from flask import Flask, render_template, request, redirect, url_for, flash
from werkzeug.utils import secure_filename # 用于安全地处理文件名
app = Flask(__name__)
app.secret_key = 'supersecretkey_for_flash_messages' # flash 消息需要 secret_key
# 配置图片上传目录
UPLOAD_FOLDER = os.path.join('static', 'images')
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'} # 允许的图片扩展名
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER # 将配置赋值给 app.config
# 用于存储当前显示的图片文件名（仅为演示目的，生产环境应避免全局变量）
current_file = 'chart.png' # 默认图片名
def allowed_file(filename):
"""检查文件是否是允许的 
