flask入门（三）静态文件

最新推荐文章于 2024-05-11 08:53:52 发布

一只楚楚猫

最新推荐文章于 2024-05-11 08:53:52 发布

阅读量6.2k

点赞数 2

分类专栏： python 文章标签： flask python

本文链接：https://blog.csdn.net/julac/article/details/121270106

版权

python 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

静态文件（static files）和模板的概念相反，指的是内容不需要动态生成的文件，比如图片、CSS 文件和 JavaScript 脚本等。

在 Flask 中，我们需要创建一个 static 文件夹来保存静态文件，它应该和程序模块、templates 文件夹在同一目录层级。
在这里插入图片描述
生成静态文件 URL
在 HTML 文件里，引入这些静态文件需要给出资源所在的 URL，这些文件的 URL 可以通过 Flask 提供的 url_for() 函数来生成。

url_for() 函数的用法，传入端点值（视图函数的名称）和参数，它会返回对应的 URL。对于静态文件，需要传入的端点值是static ，同时使用 filename 参数来传入相对于 static 文件夹的文件路径。

假如我们在 static 文件夹的根目录下面放了一个 tangwutong.jpg 文件，下面的调用可以获取它的 URL：

<img src="{{url_for('static',filename='tangwutong.jpg')}}">

花括号部分的调用会返回 /static/tangwutong.jpg 。

在 Python 脚本里， url_for() 函数需要从 flask 包中导入，而在模板中则可以直接使用，因为 Flask 把一些常用的函数和对象添加到了模板上下文（环境）里。
在这里插入图片描述
picture.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>picture</title>
</head>
<body>
    <img src="{{url_for('static',filename='tangwutong.jpg')}}">
    <p>path:{{url_for('static',filename='tangwutong.jpg')}}</p>
</body>
</html>

picture.py:

from flask import Flask, render_template

app = Flask(__name__)


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


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

tangwutong.jpg:
在这里插入图片描述
运行结果：

在这里插入图片描述
注意：一定要运行picture.py文件，如果直接运行picture.html文件，url_for()函数不起作用。

添加 CSS
在static 目录下创建一个 CSS 文件 picture.css，内容如下：

body{
	background:#0000ff;
}

接着在页面的标签内引入这个 CSS 文件：

<head>
    <meta charset="UTF-8">
    <title>picture</title>

    <link rel="stylesheet" href="{{url_for('static',filename='picture.css')}}" type="text/css">
</head>

文件布局：
在这里插入图片描述
picture.css:

body{
	background:#0000ff;
}

picture.py:

from flask import Flask, render_template

app = Flask(__name__)


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


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

picture.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>picture</title>

    <link rel="stylesheet" href="{{url_for('static',filename='picture.css')}}" type="text/css">
</head>
<body>
    <img src="{{url_for('static',filename='tangwutong.jpg')}}">
    <p>path:{{url_for('static',filename='tangwutong.jpg')}}</p>
</body>
</html>

运行结果：
在这里插入图片描述（这张图片凑合着看吧）

切记：一定要运行picture.py，不要直接运行picture.html。

一只楚楚猫

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
flask入门（三）静态文件

静态文件（static files）和模板的概念相反，指的是内容不需要动态生成的文件，比如图片、CSS 文件和 JavaScript 脚本等。在 Flask 中，我们需要创建一个 static 文件夹来保存静态文件，它应该和程序模块、templates 文件夹在同一目录层级。生成静态文件 URL在 HTML 文件里，引入这些静态文件需要给出资源所在的 URL，这些文件的 URL 可以通过 Flask 提供的 url_for() 函数来生成。url_for() 函数的用法，传入端点值（视图函数的名称
复制链接

扫一扫