在 Flask 應用程式中顯示影象
通過這個解釋，我們將學習如何將影象新增到網頁以及如何在 Flask 應用程式中上傳或顯示多個影象。
在 Flask 應用程式中顯示影象
在本節中，我們將在我們的網頁上上傳一張圖片，第一步是建立兩個初始目錄，static 和 templates。我們將建立一個新目錄，將我們的影象儲存在 static 資料夾中。
下一步是獲取我們在 static 資料夾中建立的 IMG 資料夾的地址。所以我們必須匯入 os 庫並使用它將 IMG 資料夾路徑儲存在一個名為 IMG_FOLDER 的新變數中。
IMG_FOLDER = os.path.join('static', 'IMG')
我們需要將此地址傳遞給應用程式配置上傳資料夾。所以我們必須進入 UPLOAD_FOLDER 並分配我們想要檢視影象的地址。
app.config['UPLOAD_FOLDER'] = IMG_FOLDER
在下一步中，我們將使用 UPLOAD_FOLDER 與我們希望在網頁上顯示的影象名稱連線路徑。我們將把這個地址儲存在 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 檔案進行一些更改。我們不會一個一個地傳遞它們，而是使用一個 imagelist 變數通過迴圈顯示它們，該變數是多個影象的列表。
現在我們將放置一個 img 標籤，在這個標籤內，我們將使用 url_for 標籤來獲取靜態檔案。url_for() 將採用兩個屬性：一個是 static，第二個是 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