锋哥原创的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="">
运行效果: