在 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>
当我们运行服务器并进入浏览器时,我们可以看到这里显示的多张图片。
相关文章
Django 中的 Slug
发布时间:2023/05/04 浏览次数:173 分类:Python
-
本篇文章旨在定义一个 slug 以及我们如何使用 slug 字段在 Python 中使用 Django 获得独特的帖子。
在 Django 中按降序过滤查询集中的项目
发布时间:2023/05/04 浏览次数:157 分类:Python
-
在这个讲解中,学习如何借助 Django 中的 order_by() 方法按降序过滤出查询集中的项目。
Django ALLOWED_HOSTS 介绍
发布时间:2023/05/04 浏览次数:181 分类:Python
-
本文展示了如何创建您的 Django 网站,为公开发布做好准备,如何设置 ALLOWED_HOSTS 以及如何在使用 Django 进行 Web 部署期间修复预期的主要问题。
Django 中的 Select_related 方法
发布时间:2023/05/04 浏览次数:129 分类:Python
-
本文介绍了什么是查询集,如何处理这些查询以及我们如何利用 select_related() 方法来过滤 Django 中相关模型的查询。
使用 Post 请求将数据发送到 Django 服务器
发布时间:2023/05/04 浏览次数:159 分类:Python
-
在这篇关于Django的讲解中,我们简要介绍了post和get请求以及如何在Django中用post实现CSRF token。
Django 返回 JSON
发布时间:2023/05/04 浏览次数:106 分类:Python
-
在与我们的讨论中,我们简要介绍了 JSON 格式,并讨论了如何借助 Django 中的 JsonResponse 类将数据返回为 JSON 格式。
在 Django 中创建对象
发布时间:2023/05/04 浏览次数:59 分类:Python
-
本文的目的是解释什么是模型以及如何使用 create() 方法创建对象,并了解如何在 Django 中使用 save() 方法。
在 Django 中为多项选择创建字段
发布时间:2023/05/04 浏览次数:75 分类:Python
-
在本文中,我们将着眼于为多项选择创建一个字段,并向您展示如何允许用户在 Django 中进行多项选择。