Flask 在HTML页面上显示图片的方法

在本文中，我们将介绍如何使用Flask框架在HTML页面上显示图片。Flask是一个轻量级的Python网络框架，主要用于构建Web应用程序。它简单易用，并且具有丰富的功能和灵活的扩展性。显示图片是Web应用程序中常见的功能之一，下面将展示如何在Flask中实现。

阅读更多：Flask 教程

1. 准备工作

在开始之前，我们需要先准备好一些文件和文件夹。首先，在项目的根目录下创建一个名为static的文件夹，用于存放静态文件，例如图片。然后，在static文件夹下创建一个名为images的子文件夹，用于存放要显示的图片。假设我们要显示一张名为example.jpg的图片，将其保存在static/images文件夹下。

2. 创建Flask应用

首先，我们需要创建一个Flask应用。在项目的根目录下创建一个名为app.py的文件，并使用以下代码创建一个简单的Flask应用：

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

在上面的代码中，我们导入了Flask和render_template类。Flask用于创建应用对象，render_template用于渲染模板文件。我们定义了一个名为index的路由，该路由将会在用户访问根目录时被调用。在路由函数中，我们使用render_template方法返回一个名为index.html的模板。

3. 创建HTML模板

接下来，我们需要创建一个HTML模板文件index.html，并将其放置在项目根目录下的templates文件夹中。在index.html中，我们可以通过以下代码来显示图片：

<!DOCTYPE html>
<html>
<head>
    <title>Display Image</title>
</head>
<body>
    <h1>显示图片</h1>
    < img src="{{ url_for('static', filename='images/example.jpg') }}" alt="示例图片">
</body>
</html>