Issue
I am trying to display images on my website using flask. I have a for loop that iterates over the images found on my 'static' directory but I also want to dispplay the names of the images at the bottom of the image. At the moment the images' names are appearing as 'image.jpg' but I wish to get rid of the '.jpg'. Any idea how I can do this?
Here is my app.py
from flask import Flask, render_template, flash, url_for
import os
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template("home.html")
@app.route('/select.html')
def select():
imagelist = os.listdir(os.path.join(app.static_folder,"images"))
return render_template("select.html", imagelist=imagelist)
@app.route('/versus.html')
def versus():
return render_template("versus.html")
if __name__ == '__main__':
app.run(host='0.0.0.0',debug=True)
Here is the html template in which I have the for loop
<!DOCTYPE html>
<html>
<head>
<title>Disney Favorites</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.centre {
text-align: center;
}
</style>
</head>
<body>
<h1 style= "font-size: 25px" class="text-center">Click on your favorite animated Disney canon movie</h1>
<section>
{% for image in imagelist %}
<div class="centre">
<button type="submit">
<img class="center" src="{{ url_for('static', filename='images/' + image) }}">
</img>
<p>{{image}}</p>
</button>
</div>
{% endfor %}
</section>
Solution
you have to use a filter:
<p>{{image|replace(".jpg", "")}}</p>
Answered By - rioV8
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.