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

运行效果:

相关推荐
万粉变现经纪人2 小时前
如何解决 pip install 安装报错 ModuleNotFoundError: No module named ‘tokenizers’ 问题
python·selenium·测试工具·scrapy·beautifulsoup·fastapi·pip
编程武士4 小时前
从50ms到30ms:YOLOv10部署中图像预处理的性能优化实践
人工智能·python·yolo·性能优化
我的xiaodoujiao4 小时前
Windows系统Web UI自动化测试学习系列2--环境搭建--Python-PyCharm-Selenium
开发语言·python·测试工具
傻啦嘿哟6 小时前
Python SQLite模块:轻量级数据库的实战指南
数据库·python·sqlite
Q_Q5110082857 小时前
python+django/flask+uniapp基于微信小程序的瑜伽体验课预约系统
spring boot·python·django·flask·uni-app·node.js·php
XueminXu7 小时前
Python读取MongoDB的JSON字典和列表对象转为字符串
python·mongodb·json·pymongo·mongoclient·isinstance·json.dumps
techdashen7 小时前
12分钟讲解Python核心理念
开发语言·python
jie*7 小时前
小杰机器学习(nine)——支持向量机
人工智能·python·机器学习·支持向量机·回归·聚类·sklearn
闭着眼睛学算法7 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
郝学胜-神的一滴7 小时前
谨慎地迭代函数所收到的参数 (Effective Python 第31条)
开发语言·python·程序人生·软件工程