在 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 文件中使用的源代码:
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello worl!title>
head>
<body>
<h1>hello world!h1>
<center><h3>flask logoh3><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
。
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello worl!title>
head>
<body>
<h1>the multiple imagesh1>
{% for i in imagelist %}
<img src = "{{ url_for('static', filename=i)}}">
{% endfor %}
body>
html>
当我们运行服务器并进入浏览器时,我们可以看到这里显示的多张图片。
转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处
本文地址:
相关文章
pandas dataframe dataframe.shift() 函数
发布时间:2024/04/24 浏览次数:133 分类:python
-
dataframe.shift() 函数是将 dataframe 的索引按指定的周期数进行移位。
python pandas.pivot_table() 函数
发布时间:2024/04/24 浏览次数:82 分类:python
-
python pandas pivot_table()函数通过对数据进行汇总,避免了数据的重复。
pandas read_csv()函数
发布时间:2024/04/24 浏览次数:254 分类:python
-
pandas read_csv()函数将指定的逗号分隔值(csv)文件读取到 dataframe 中。
pandas 多列合并
发布时间:2024/04/24 浏览次数:628 分类:python
-
本教程介绍了如何在 pandas 中使用 dataframe.merge()方法合并两个 dataframes。
pandas loc vs iloc
发布时间:2024/04/24 浏览次数:837 分类:python
-
本教程介绍了如何使用 python 中的 loc 和 iloc 从 pandas dataframe 中过滤数据。
在 python 中将 pandas 系列的日期时间转换为字符串
发布时间:2024/04/24 浏览次数:894 分类:python
-
了解如何在 python 中将 pandas 系列日期时间转换为字符串