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

运行效果:

相关推荐
令狐少侠20116 分钟前
idea中或pycharm中编写Markdown文件
python·django
灿灿的金14 分钟前
pip 与当前python环境版本不匹配,python安装库成功,还是提示没有该库
开发语言·python·pip
数据知道32 分钟前
数据存储:一文掌握RabbitMQ的详细使用
分布式·python·rabbitmq·数据存储
_zwy44 分钟前
【Linux 进程状态】—— 从创建到消亡的全生命周期
linux·python·运维开发
奔跑吧邓邓子1 小时前
【Python爬虫(67)】Python爬虫实战:探秘旅游网站数据宝藏
开发语言·爬虫·python·旅游网站
m0_748038561 小时前
NLP09-朴素贝叶斯问句分类(3/3)
人工智能·python·机器学习·自然语言处理·数据挖掘·nlp
HerrFu1 小时前
可狱可囚的爬虫系列课程 15:防盗链反爬虫的处理
爬虫·python
HerrFu1 小时前
可狱可囚的爬虫系列课程 14:10 秒钟编写一个 requests 爬虫
爬虫·python
数据知道1 小时前
爬虫反爬:字体反爬案例分析与爬取实战
爬虫·python·数据采集·爬虫解析
猿毕设2 小时前
【FL0100】基于SSM微信小程序的走失人员的报备平台
java·spring boot·后端·python·微信小程序·小程序