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

运行效果:

相关推荐
Gyoku Mint6 分钟前
深度学习×第4卷:Pytorch实战——她第一次用张量去拟合你的轨迹
人工智能·pytorch·python·深度学习·神经网络·算法·聚类
郭庆汝6 小时前
pytorch、torchvision与python版本对应关系
人工智能·pytorch·python
思则变9 小时前
[Pytest] [Part 2]增加 log功能
开发语言·python·pytest
漫谈网络9 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
try2find11 小时前
安装llama-cpp-python踩坑记
开发语言·python·llama
博观而约取12 小时前
Django ORM 1. 创建模型(Model)
数据库·python·django
精灵vector13 小时前
构建专家级SQL Agent交互
python·aigc·ai编程
Zonda要好好学习13 小时前
Python入门Day2
开发语言·python
Vertira13 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
太凉13 小时前
Python之 sorted() 函数的基本语法
python