HTML页面自动刷新内存更新的图片？Flask新手求助

你当前用<meta http-equiv="refresh" content="2">整页刷新的方式，体验差还可能因为浏览器缓存导致新图片不显示。下面给你两个更实用的方案：

方案一：定时局部刷新图片+避免缓存 #

直接修改HTML，去掉整页刷新的meta标签，用JS定时更新图片的src，加上时间戳参数绕过浏览器缓存：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stack of Images</title>
</head>

<body>
    <img src="static/X.jpg" alt="Image 1" id="img1" width="960" height="540">
    <img src="static/X_display.jpg" alt="Image 2" id="img2" width="960" height="540">

    <script>
        function refreshImages() {
            const timestamp = new Date().getTime();
            $('#img1').attr('src', `static/X.jpg?${timestamp}`);
            $('#img2').attr('src', `static/X_display.jpg?${timestamp}`);
        }

        $(document).ready(function() {
            refreshImages();
            // 每隔2秒刷新一次，可自行调整毫秒数
            setInterval(refreshImages, 2000);
        });
    </script>
</body>
</html>

这个方案只会刷新两张图片，不会整页重载；时间戳参数让浏览器认为是新请求，不会读取缓存的旧图片。

方案二：仅在图片实际更新时刷新（Flask配合） #

如果想更高效，只有当图片真的被修改时才刷新，可以在Flask后端加接口，前端定时检查图片修改时间，对比后再更新：

Flask后端代码 #

from flask import Flask, jsonify, render_template
import os
from datetime import datetime

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/image-mod-time/<filename>')
def get_image_mod_time(filename):
    image_path = os.path.join('static', filename)
    if os.path.exists(image_path):
        mod_time = os.path.getmtime(image_path)
        return jsonify({'mod_time': datetime.fromtimestamp(mod_time).isoformat()})
    return jsonify({'mod_time': None})

if __name__ == '__main__':
    app.run(debug=True)

前端HTML修改 #

把之前的脚本换成下面的：

<script>
    let lastModTimes = {
        'X.jpg': null,
        'X_display.jpg': null
    };

    function checkAndRefreshImages() {
        // 检查第一张图片
        $.get(`/image-mod-time/X.jpg`, function(data) {
            if (data.mod_time && data.mod_time !== lastModTimes['X.jpg']) {
                lastModTimes['X.jpg'] = data.mod_time;
                const timestamp = new Date().getTime();
                $('#img1').attr('src', `static/X.jpg?${timestamp}`);
            }
        });

        // 检查第二张图片
        $.get(`/image-mod-time/X_display.jpg`, function(data) {
            if (data.mod_time && data.mod_time !== lastModTimes['X_display.jpg']) {
                lastModTimes['X_display.jpg'] = data.mod_time;
                const timestamp = new Date().getTime();
                $('#img2').attr('src', `static/X_display.jpg?${timestamp}`);
            }
        });
    }

    $(document).ready(function() {
        checkAndRefreshImages();
        // 每隔2秒检查一次
        setInterval(checkAndRefreshImages, 2000);
    });
</script>

注意事项 #

• 确保Flask项目结构正确：templates文件夹放HTML，static文件夹放图片。
• 定时刷新的间隔可以根据需求调整，比如改成5000就是5秒检查一次。
• 方案一简单直接，适合快速实现；方案二更节省资源，适合对性能有要求的场景。

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