Flask调用historic_graph_search()生成图表后HTML显示旧图的问题

这问题我之前踩过坑！核心原因就是浏览器缓存——你每次生成的图表文件名完全一样，浏览器会默认认为这是同一个资源，直接从本地缓存里调取旧图，根本没去服务器请求新生成的版本。下面给你几个实用的解决办法，按需选择就行：

方法1：给图片URL加缓存破击参数（最简单高效） #

不用改文件名，只需要在HTML引用图片时，加一个动态变化的参数（比如时间戳、随机数），让浏览器误以为这是个全新的资源。

具体操作： #

1. 在app.py的historic_graph_search()函数里，生成图表后把动态参数传给模板：

from datetime import datetime

@app.route('/historic-graph', methods=['GET', 'POST'])
def historic_graph_search():
    # 你的图表生成逻辑（比如读取static数据、绘图）
    plt.savefig('static/historic_graph.png')
    plt.close()  # 务必关闭plt，避免内存泄漏和文件锁定
    
    # 生成时间戳当缓存破击参数（每次请求都不一样）
    cache_buster = datetime.now().strftime("%Y%m%d%H%M%S")
    
    return render_template('historic_graph_search.html', cache_buster=cache_buster)

2. 在historic_graph_search.html里，引用图片时带上这个参数：

<img src="{{ url_for('static', filename='historic_graph.png') }}?v={{ cache_buster }}" alt="最新历史图表">

这样每次页面加载时，图片URL的v参数都不同，浏览器就会主动请求服务器上的最新图片了。

方法2：每次生成唯一文件名（适合需要保留历史图表的场景） #

如果需要留存每次生成的图表记录，可以给每个图表起一个唯一的文件名，比如用时间戳命名。

具体操作： #

1. 修改app.py的保存逻辑：

from datetime import datetime

@app.route('/historic-graph', methods=['GET', 'POST'])
def historic_graph_search():
    # 生成唯一文件名
    graph_filename = f'historic_graph_{datetime.now().strftime("%Y%m%d%H%M%S")}.png'
    plt.savefig(f'static/{graph_filename}')
    plt.close()
    
    # 将动态文件名传给模板
    return render_template('historic_graph_search.html', graph_filename=graph_filename)

2. 在HTML里引用这个动态文件名：

<img src="{{ url_for('static', filename=graph_filename) }}" alt="最新历史图表">

⚠️ 注意：这个方法会让static文件夹里的图表越来越多，建议定期清理旧文件（比如写个定时脚本删除N天前的图表）。

方法3：通过响应头禁用缓存（全局控制） #

可以在Flask里设置响应头，强制浏览器不缓存指定的图片资源。

具体操作： #

在app.py里新增一个专门的路由来返回图表，同时设置缓存控制头：

from flask import send_from_directory

@app.route('/static/historic_graph.png')
def serve_latest_graph():
    response = send_from_directory('static', 'historic_graph.png')
    # 设置缓存规则：不缓存、立即过期
    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response.headers['Pragma'] = 'no-cache'
    response.headers['Expires'] = '0'
    return response

然后在HTML里直接调用这个路由：

<img src="{{ url_for('serve_latest_graph') }}" alt="最新历史图表">

这个方法不用改模板逻辑，但每次都会重新请求图片，可能会有轻微的性能损耗。

额外提醒 #

• 不管用哪种方法，都要记得调用plt.close()，否则matplotlib会占用内存，甚至导致图表文件被锁定无法覆盖保存。
• 如果是用AJAX动态更新图表，也要在AJAX请求的图片URL里加上缓存破击参数，原理和上面一致。

内容的提问来源于stack exchange，提问作者Jay Desai