Afficher une image dans l'application Flask
Nous apprendrons, avec cette explication, comment nous pouvons ajouter une image à une page Web et comment nous pouvons télécharger ou afficher plusieurs images dans l’application Flask.
Afficher une image dans l’application Flask
Dans cette section, nous allons télécharger une image sur notre page Web, et la première étape consiste à créer deux répertoires initiaux, static et templates. Nous allons créer un nouveau répertoire qui contiendra nos images à l’intérieur du répertoire static.
L’étape suivante consiste à obtenir l’adresse de ce dossier IMG que nous avons créé dans le dossier static. Nous devons donc importer la bibliothèque os et l’utiliser pour enregistrer le chemin du dossier IMG dans une nouvelle variable appelée IMG_FOLDER.
IMG_FOLDER = os.path.join("static", "IMG")
Nous devrons transmettre cette adresse au dossier de téléchargement de la configuration de l’application. Nous devons donc aller dans UPLOAD_FOLDER et attribuer l’adresse où nous voulons regarder les images.
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
Dans l’étape suivante, nous joindrons le chemin en utilisant UPLOAD_FOLDER avec un nom d’image que nous voulons afficher sur la page Web. Nous stockerons cette adresse dans la variable Flask_Logo à l’intérieur de la fonction Display_IMG().
Flask_Logo = os.path.join(app.config["UPLOAD_FOLDER"], "flask-logo.png")
Ensuite, nous devrons définir un argument à l’intérieur du render_template() et lui transmettre la variable Flask_Logo en tant que valeur.
from flask import Flask, render_template
import os
app = Flask(__name__)
IMG_FOLDER = os.path.join("static", "IMG")
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
@app.route("/")
def Display_IMG():
Flask_Logo = os.path.join(app.config["UPLOAD_FOLDER"], "flask-logo.png")
return render_template("index.html", user_image=Flask_Logo)
if __name__ == "__main__":
app.run(debug=True)
Maintenant, nous devrons aller dans le dossier templates et créer un fichier index.html, et à l’intérieur de ce fichier, nous allons écrire du code HTML de base. Nous ne passerons que la variable user_image dans la balise img que nous avons définie dans le render_template().
Voici le code source utilisé dans le fichier HTML pour cet exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Worl!</title>
</head>
<body>
<h1>Hello World!</h1>
<center><h3>Flask Logo</h3><img src="{{ user_image }}" alt="Mike" height="240px" width="300px"></center>
</body>
</html>
Lorsque nous exécuterons cette application, nous verrons l’image s’afficher correctement.
Afficher plusieurs images dans l’application Flask
Nous allons maintenant ajouter plusieurs images du dossier IMG et vous montrer comment vous pouvez toutes les afficher, alors commençons par faire une liste des images. Nous allons créer cette liste à l’intérieur de la fonction qui contiendra tous les actifs d’un répertoire à l’aide de la fonction listdir(), et le nom de la liste sera IMG_LIST.
IMG_LIST = os.listdir("static/IMG")
Nous allons maintenant créer une boucle pour toutes les images, et nous allons utiliser la compréhension de liste et la stocker dans la même variable appelée IMG_LIST.
from flask import Flask, render_template
import os
app = Flask(__name__)
IMG_FOLDER = os.path.join("static", "IMG")
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
@app.route("/")
def Display_IMG():
IMG_LIST = os.listdir("static/IMG")
IMG_LIST = ["IMG/" + i for i in IMG_LIST]
return render_template("index.html", imagelist=IMG_LIST)
if __name__ == "__main__":
app.run(debug=True)
L’étape suivante consiste à apporter quelques modifications au fichier HTML. Au lieu de les passer une par une, nous allons les afficher à travers la boucle à l’aide d’une variable imagelist qui est une liste de plusieurs images.
Maintenant, nous allons mettre une balise img, et à l’intérieur de cette balise, nous allons utiliser la balise url_for pour obtenir des fichiers statiques. url_for prendra deux attributs : l’un sera static, et le second sera le filename, et nous lui passerons un élément i que nous itérerons dans la boucle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Worl!</title>
</head>
<body>
<h1>The Multiple Images</h1>
{% for i in imagelist %}
<img src = "{{ url_for('static', filename=i)}}">
{% endfor %}
</body>
</html>
Lorsque nous exécutons le serveur et que nous accédons au navigateur, nous pouvons voir les multiples images affichées ici.
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn