在 Flask 应用程序中显示图像

Salman Mehmood 2024年2月15日
  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
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