Flask 如何在 Flask 中在 HTML 页面上显示图片

阅读更多：Flask 教程

介绍

Flask 是一个使用 Python 编写的轻量级 Web 开发框架，它简单易用，功能灵活。在 Web 开发中，经常需要在 HTML 页面上显示图片，本文将介绍在 Flask 中如何实现这一功能。

Flask 路由

在 Flask 中，路由是指将 URL 和执行的函数之间建立映射关系的过程。我们可以通过在路由函数中返回 HTML 页面来在浏览器上显示内容。首先，我们需要在 Flask 中定义一个路由，用来显示包含图片的 HTML 页面。

from flask import Flask, render_template

app = Flask(__name__)

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

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

HTML 模板

在 Flask 中，我们可以使用 Jinja2 模板引擎来生成动态的 HTML 页面。在 HTML 模板中，我们可以使用< img>标签来显示图片。例如，我们可以在模板中添加如下代码：

< img src="{{ url_for('static', filename='images/image.jpg') }}" alt="Image">

在这个例子中，我们使用了 Flask 提供的 url_for 函数来生成正确的图片 URL，'static' 表示静态文件夹，'images/image.jpg' 表示图片的相对路径。通过这样的方式，我们便可以在 HTML 页面上显示图片。

静态文件夹

为了能够正确地加载图片，我们需要在 Flask 中设置静态文件夹的路径。在 Flask 应用的根目录下，新建一个名为static的文件夹，并将图片文件保存在其中。

Flask_App/
    static/
        images/
            image.jpg
    templates/
        index.html
    app.py

完整示例

下面是一个完整的示例，演示如何在 Flask 中显示图片：

from flask import Flask, render_template

app = Flask(__name__)

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Display Image</title>
</head>
<body>
    <h1>Display Image</h1>
    < img src="{{ url_for('static', filename='images/image.jpg') }}" alt="Image">
</body>
</html>