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

锋哥原创的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="">

运行效果:

相关推荐
JosieBook16 分钟前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
UrbanJazzerati1 小时前
掌握 xlwings 的 used_range:高效处理 Excel 数据区域
python·面试·excel
XerCis1 小时前
Python的RSS/Atom源解析库feedparser
开发语言·python
甄心爱学习2 小时前
Typer 命令行工具使用示例
python
呆萌很2 小时前
Python 算数运算练习题
python
長琹2 小时前
AES加密算法详细加密步骤代码实现--身份证号码加解密系统
网络·数据库·人工智能·python·密码学
魔都吴所谓2 小时前
【Python】根据开始时间、结束时间计算中间时间
开发语言·windows·python
大明者省2 小时前
pycharm解释器使用anaconda建立的虚拟环境里面的python,无需系统里面安装python。
linux·python·pycharm
言之。2 小时前
Django REST framework:SimpleRouter 使用指南
python·django·sqlite
劳尔的狙击镜2 小时前
CT影像寻找皮肤轮廓预处理
python·opencv·findcontours·ct·皮肤轮廓·皮肤表皮建模·医学影像处理