Flask アプリで画像を表示する
この説明では、Web ページに画像を追加する方法と、Flask アプリで複数の画像をアップロードまたは表示する方法を学習します。
Flask アプリで画像を表示する
このセクションでは、Web ページに画像をアップロードします。最初のステップは、static と templates の 2つの初期ディレクトリを作成することです。static フォルダ内に画像を保持する新しいディレクトリを作成します。
次のステップは、static フォルダー内に作成したこの IMG フォルダーのアドレスを取得することです。したがって、os ライブラリをインポートし、それを使用して IMG フォルダパスを IMG_FOLDER という新しい変数に保存する必要があります。
IMG_FOLDER = os.path.join("static", "IMG")
このアドレスをアプリケーション構成のアップロードフォルダーに渡す必要があります。したがって、UPLOAD_FOLDER の内部に入り、画像を見たいアドレスを割り当てる必要があります。
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
次のステップでは、UPLOAD_FOLDER を使用して、Web ページに表示する画像名でパスを結合します。このアドレスは、Display_IMG() 関数内の Flask_Logo 変数に格納されます。
Flask_Logo = os.path.join(app.config["UPLOAD_FOLDER"], "flask-logo.png")
次に、render_template() 内に引数を定義し、Flask_Logo 変数を値としてこれに渡す必要があります。
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)
次に、templates フォルダーに移動して index.html ファイルを作成する必要があります。このファイル内に、基本的な HTML コードを記述します。render_template() で定義した img タグで user_image 変数のみを渡します。
これは、この例の HTML ファイルで使用されるソースコードです。
<!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>
このアプリを実行すると、画像が正しく表示されます。
Flask アプリで複数の画像を表示する
次に、IMG フォルダから複数の画像を追加し、それらすべてを表示する方法を示します。まず、画像のリストを作成します。listdir() 関数を使用して、ディレクトリのすべてのアセットを保持する関数内にこのリストを作成します。リスト名は IMG_LIST になります。
IMG_LIST = os.listdir("static/IMG")
次に、すべての画像のループを作成し、リスト内包表記を使用して、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)
次のステップは、HTML ファイルにいくつかの変更を加えることです。それらを 1つずつ渡す代わりに、複数の画像のリストである imagelist 変数を使用してループを介してそれらを表示します。
次に、img タグを配置し、このタグ内で、url_for タグを使用して静的ファイルを取得します。url_for() は 2つの属性を取ります。1つは static で、もう 1つは filename で、ループを反復処理するアイテム i を渡します。
<!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>
サーバーを実行してブラウザに移動すると、ここに表示されている複数の画像を確認できます。
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