Ein Bild in der Flask-App anzeigen
Mit dieser Erklärung lernen wir, wie wir ein Bild zu einer Webseite hinzufügen und wie wir mehrere Bilder in der Flask-App hochladen oder anzeigen können.
Ein Bild in der Flask-App anzeigen
In diesem Abschnitt laden wir ein Bild auf unsere Webseite hoch, und der erste Schritt besteht darin, zwei anfängliche Verzeichnisse zu erstellen, statisch und Vorlagen. Wir werden ein neues Verzeichnis erstellen, das unsere Bilder im Ordner statisch enthält.
Der nächste Schritt besteht darin, die Adresse dieses Ordners IMG abzurufen, den wir im Ordner static erstellt haben. Also müssen wir die Bibliothek os importieren und damit den Ordnerpfad IMG in einer neuen Variablen namens IMG_FOLDER speichern.
IMG_FOLDER = os.path.join("static", "IMG")
Wir müssen diese Adresse an den Upload-Ordner der Anwendungskonfiguration weitergeben. Also müssen wir in UPLOAD_FOLDER gehen und die Adresse zuweisen, wo wir die Bilder anschauen wollen.
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
Im nächsten Schritt verbinden wir den Pfad mit UPLOAD_FOLDER mit einem Bildnamen, den wir auf der Webseite anzeigen möchten. Diese Adresse speichern wir in der Variable Flask_Logo innerhalb der Funktion Display_IMG().
Flask_Logo = os.path.join(app.config["UPLOAD_FOLDER"], "flask-logo.png")
Als nächstes müssen wir ein Argument in render_template() definieren und die Variable Flask_Logo als Wert an dieses übergeben.
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)
Jetzt müssen wir zum Ordner templates gehen und eine index.html-Datei erstellen, und in diese Datei schreiben wir einfachen HTML-Code. Wir übergeben nur die Variable user_image im img-Tag, das wir in render_template() definiert haben.
Dies ist der Quellcode, der in der HTML-Datei für dieses Beispiel verwendet wird:
<!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>
Wenn wir diese App ausführen, wird das Bild richtig angezeigt.
Zeigen Sie mehrere Bilder in der Flask-App an
Jetzt werden wir mehrere Bilder aus dem Ordner IMG hinzufügen und Ihnen zeigen, wie Sie alle anzeigen können, also beginnen wir damit, eine Liste der Bilder zu erstellen. Wir werden diese Liste innerhalb der Funktion erstellen, die alle Assets eines Verzeichnisses enthält, indem wir die Funktion listdir() verwenden, und der Listenname wird IMG_LIST sein.
IMG_LIST = os.listdir("static/IMG")
Jetzt erstellen wir eine Schleife für alle Bilder, verwenden das Listenverständnis und speichern es in derselben Variablen namens 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)
Der nächste Schritt besteht darin, einige Änderungen an der HTML-Datei vorzunehmen. Anstatt sie einzeln weiterzugeben, werden wir sie durch die Schleife anzeigen, indem wir eine imagelist-Variable verwenden, die eine Liste mehrerer Bilder ist.
Jetzt werden wir ein img-Tag einfügen und innerhalb dieses Tags das url_for-Tag verwenden, um statische Dateien zu erhalten. url_for() nimmt zwei Attribute: eines wird static sein, und das zweite wird der filename sein, und wir werden ihm ein Element i übergeben, das wir durch die Schleife iterieren.
<!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>
Wenn wir den Server ausführen und zum Browser gehen, können wir die hier angezeigten Bilder sehen.
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