Issue
I'm currently working on a personal project that has this python function to update an image on a webpage for a specific amount of time. The output indicates that the image was successfully retrieved but it doesn't get updated on the actual webpage. Here's the script for both:
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)
Debug Outputs
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 -
Solution
You want to get the URLs of the randomly selected images via AJAX.
In your attempt, however, you obtain the entire template again. This does not have a current_images property because it contains the rendered HTML code and not a JavaScript object. This and the fact that the static folder within the respective URL was ignored means that the images cannot be loaded.
I recommend that you send the URLs in JSON format after you have created the complete URL in the usual way with url_for.
from flask import jsonify, url_for
# ...
@app.route('/update_image')
def update_image():
current_images = random.choice(image_list)
print(current_images)
return jsonify(current_images=url_for('static', filename=current_images))
Answered By - Detlef
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.