一周学会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="">

运行效果:

相关推荐
海哥编程40 分钟前
Python 数据分析(二):Matplotlib 绘图
python·数据分析·matplotlib
go54631584652 小时前
Python点阵字生成与优化:从基础实现到高级渲染技术
开发语言·人工智能·python·深度学习·分类·数据挖掘
猫头虎2 小时前
2025年02月11日 Go生态洞察:Go 1.24 发布亮点全面剖析
开发语言·后端·python·golang·go·beego·go1.19
仰望天空—永强2 小时前
PS 2025【七月最新v26.5】PS铺软件安装|最新版|附带安装文件|详细安装说明|附PS插件
开发语言·图像处理·python·图形渲染·photoshop
MediaTea2 小时前
Python 库手册:xmlrpc.client 与 xmlrpc.server 模块
开发语言·python
悦悦子a啊2 小时前
Python之--字典
开发语言·python·学习
水军总督2 小时前
OpenCV+Python
python·opencv·计算机视觉
qyhua3 小时前
Windows 平台源码部署 Dify教程(不依赖 Docker)
人工智能·windows·python
一车小面包3 小时前
Python高级入门Day6
开发语言·python
攻城狮凌霄3 小时前
PHP与ChatGPT结合的技术王炸,开发高效创作小红书内容系统
python