使用Flask的AJAX请求成功但网页图片未更新问题求助

我正在开发一个个人项目，通过Python函数实现网页图片的定时更新。调试输出显示图片已成功获取，但网页上的实际图片并未更新。

index.html 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Viewer</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <h1>Image Viewer</h1>
    <img id="image-display" src="{{ url_for('static', filename=current_images) }}" alt="Random Image">
    <br>
    <button id="update-button">Update Image</button>
    <div id="countdown">5</div>

    <script>
        // Function to update the image using Ajax
        function updateImage() {
            $.ajax({
                url: "{{ url_for('update_image') }}",
                method: "GET",
                success: function(data) {
                    $("#image-display").attr("src", data.current_images);
                }
            });
        }

        // Function to handle the button click
        function handleButtonClick() {
            var countdown = 5;

            // Update the countdown and the image every 0.2 seconds
            var countdownInterval = setInterval(function() {
                $("#countdown").text(countdown);
                
                if (countdown === 0) {
                    clearInterval(countdownInterval);
                    $("#countdown").text("");
                } else {
                    updateImage();
                    countdown--;
                }
            }, 200);
        }

        // Attach click event to the button
        $("#update-button").click(function() {
            handleButtonClick();
        });
    </script>
</body>
</html>

App.py 代码 #

import random
from flask import Flask, render_template

app = Flask(__name__)

image_list = ['img model/Talk1Eh.png','img model/Talk1Mmm.png', 'img model/Talk1OpenMouth_Oh.png',
            'img model/Talk1OpenMouthA.png', 'img model/Talk1OpenMouthHA.png']

@app.route('/')
def index():
    return render_template('index.html', current_images = random.choice(image_list))

@app.route('/update_image')
def update_image():
    current_images = random.choice(image_list)
    print(current_images)
    return render_template('index.html', current_images = current_images)

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

调试输出 #

127.0.0.1 - - [08/Dec/2023 21:26:28] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [08/Dec/2023 21:26:28] "GET /static/img%20model/Talk1OpenMouth_Oh.png HTTP/1.1" 304 -
img model/Talk1Eh.png
127.0.0.1 - - [08/Dec/2023 21:26:30] "GET /update_image HTTP/1.1" 200 -
img model/Talk1Mmm.png
127.0.0.1 - - [08/Dec/2023 21:26:30] "GET /update_image HTTP/1.1" 200 -
img model/Talk1Eh.png
127.0.0.1 - - [08/Dec/2023 21:26:30] "GET /update_image HTTP/1.1" 200 -
img model/Talk1OpenMouthHA.png
127.0.0.1 - - [08/Dec/2023 21:26:31] "GET /update_image HTTP/1.1" 200 -
img model/Talk1Eh.png
127.0.0.1 - - [08/Dec/2023 21:26:31] "GET /update_image HTTP/1.1" 200 -
img model/Talk1OpenMouthA.png
127.0.0.1 - - [08/Dec/2023 21:26:33] "GET /update_image HTTP/1.1" 200 -
img model/Talk1OpenMouthHA.png
127.0.0.1 - - [08/Dec/2023 21:26:33] "GET /update_image HTTP/1.1" 200 -
img model/Talk1Mmm.png
127.0.0.1 - - [08/Dec/2023 21:26:33] "GET /update_image HTTP/1.1" 200 -
img model/Talk1Mmm.png
127.0.0.1 - - [08/Dec/2023 21:26:34] "GET /update_image HTTP/1.1" 200 -
img model/Talk1OpenMouthHA.png
127.0.0.1 - - [08/Dec/2023 21:26:34] "GET /update_image HTTP/1.1" 200 -

问题原因及修复方案 #

核心问题 #

1. Ajax接口返回错误数据：/update_image路由返回完整HTML页面，而前端Ajax需要的是图片静态资源URL，导致data.current_images不存在，无法更新图片src。
2. 路径空格隐患：图片路径含空格会被URL编码为%20，虽能正常访问但易引发潜在问题。
3. 定时器逻辑不符：200ms间隔的5次循环仅1秒，和页面显示的“倒计时5”感知不一致。

修复步骤 #

1. 修改App.py，返回JSON格式的图片URL

导入jsonify并调整路由逻辑：

import random
from flask import Flask, render_template, jsonify, url_for

app = Flask(__name__)

# 建议将文件夹名改为img_model，移除空格
image_list = ['img_model/Talk1Eh.png','img_model/Talk1Mmm.png', 'img_model/Talk1OpenMouth_Oh.png',
            'img_model/Talk1OpenMouthA.png', 'img_model/Talk1OpenMouthHA.png']

@app.route('/')
def index():
    return render_template('index.html', current_images = random.choice(image_list))

@app.route('/update_image')
def update_image():
    current_images = random.choice(image_list)
    print(current_images)
    # 返回包含完整静态资源URL的JSON数据
    return jsonify({'current_images': url_for('static', filename=current_images)})

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

2. 调整前端定时器逻辑，匹配倒计时显示

修改handleButtonClick函数的定时器间隔为1秒：

function handleButtonClick() {
    var countdown = 5;
    $("#countdown").text(countdown);
    
    var countdownInterval = setInterval(function() {
        countdown--;
        $("#countdown").text(countdown);
        
        if (countdown === 0) {
            clearInterval(countdownInterval);
            $("#countdown").text("");
        }
        // 每次倒计时更新时切换图片
        updateImage();
    }, 1000);
}

3. 修正静态资源路径

将项目static文件夹下的img model重命名为img_model，确保和代码路径一致。

验证效果 #

修改完成后，点击按钮，倒计时会从5开始每秒递减，同时图片同步更新。调试输出会继续打印选中的图片路径，前端能正确获取URL并替换src，页面图片即可正常更新。

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