本教程详细介绍了如何在 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 osfrom flask import Flask, render_templateapp = Flask(__name__)# 配置图片上传目录，该目录位于 'static' 文件夹下app.config['UPLOAD_FOLDER'] = os.path.join('static', 'images')@app.route("/")def running(): """根路由，简单返回应用运行状态""" return "Website running!
"@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 变量，确保图片路径正确解析。
动态图片展示 当前图片
@@##@@
此时，访问 http://localhost:3000/chart 路由即可在浏览器中看到 chart.png 图片。
2. 客户端定时刷新图片
当服务器端的图片文件内容发生变化，但文件名保持不变时，浏览器可能会因为缓存机制而继续显示旧图片。为了强制浏览器重新加载最新图片，我们需要利用 JavaScript 定时更新 标签的 src 属性，并在 URL 中添加一个唯一的查询参数（例如时间戳）来“破坏”缓存。
2.1 修改 chart.html 添加 JavaScript 刷新逻辑
动态图片展示 当前图片
@@##@@ // 获取图片元素 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秒
通过上述 JavaScript 代码，每隔 5 秒，浏览器会请求一个新的图片 URL（因为 URL 上的时间戳不同），从而绕过浏览器缓存，显示最新的图片内容。
3. 服务器端图片上传与管理
如果图片是由用户上传或服务器动态生成并需要替换现有文件，我们需要在 Flask 应用中实现文件上传功能。这涉及到接收文件、验证文件类型、安全地保存文件等步骤。
3.1 扩展 app.py：实现文件上传功能
我们需要引入 request, redirect, url_for, flash 和 werkzeug.utils.secure_filename。为了演示目的，我们使用一个全局变量 current_file 来跟踪当前显示的图片，但在生产环境中，应避免使用全局变量，而应采用数据库或会话管理来存储文件信息。
import osfrom flask import Flask, render_template, request, redirect, url_for, flashfrom 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): """检查文件是否是允许的
以上就是Flask 应用中图片动态更新与上传：实现客户端定时刷新与服务器端文件管理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1599919.html
微信扫一扫 
支付宝扫一扫 
