在 Flask 應用程式中顯示影象

Salman Mehmood 2023年1月30日 2022年7月18日
  1. 在 Flask 應用程式中顯示影象
  2. 在 Flask 應用程式中顯示多個影象
在 Flask 應用程式中顯示影象

通過這個解釋,我們將學習如何將影象新增到網頁以及如何在 Flask 應用程式中上傳或顯示多個影象。

在 Flask 應用程式中顯示影象

在本節中,我們將在我們的網頁上上傳一張圖片,第一步是建立兩個初始目錄,statictemplates。我們將建立一個新目錄,將我們的影象儲存在 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 顯示影象輸出 1

在 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>

當我們執行伺服器並進入瀏覽器時,我們可以看到這裡顯示的多張圖片。

Flask 顯示影象輸出 2

Salman Mehmood avatar Salman Mehmood avatar

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