一周学会Flask3 Python Web开发-Jinja2模版中加载静态文件

java1234_小锋2025-02-27 11:47

锋哥原创的Flask3 Python Web开发 Flask3视频教程：

2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili

一个Web项目不仅需要HTML模板，还需要许多静态文件，比如 CSS、JavaScript文件、图片以及音频等。在Flask程序中，默认我们需要将静态文件存储在与主脚本(包含程序实例的脚本)同级目录的static文件夹中。

在Jinja2模板引擎中，我们可以使用url_for()函数来加载静态资源。

我们来看一个示例：

首先在static目录下放css,js和一个图片文件。目录结构如下：

css.css:

复制代码

body {
    background-color: red;
}

javascript.js

复制代码

alert("这个是哪吒！")

student.html目录，引入js和css文件：

复制代码

<script src="{{ url_for('static',filename='js/javascript.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='css/css.css') }}"/>

以及加载图片：

复制代码

<h3>加载静态文件</h3>
<img src="{{ url_for('static',filename='images/nezha.png') }}" alt="">

运行效果：