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

news/2025/2/27 6:01:35

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

运行效果:


http://www.niftyadmin.cn/n/5869599.html

相关文章

【K8S】Kubernetes 中的基本组成部分介绍,一文了解 K8S 中的所有概念

应用 (Application) 定义&#xff1a;应用是业务逻辑的实现&#xff0c;非 K8S 中的官方的概念&#xff0c;但容器中运行的实际程序通常就被认为是应用层级关系&#xff1a;Application ∈ Container。Pod 是运行应用的载体&#xff0c;应用通是和容器一一对应&#xff0c;多个…

2011-2019年各省乡镇综合文化站机构数数据

2011-2019年各省乡镇综合文化站机构数数据 1、时间&#xff1a;2011-2019年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区、年份、乡镇综合文化站机构数 4、范围&#xff1a;31省 5、指标解释&#xff1a;乡镇综合文化站是中国基层文化…

Windows 11【1001问】修改主题隐藏或删除Win11桌面“了解此图片”

在<Windows 11【1001问】如何安装Windows 11>篇幅中我们第一安装完成Windows 11还未开始其他操作的时候会发现桌面上有一个“了解此图片”的图标是之前没见过的&#xff1b;而在Windows 11中&#xff0c;“了解此图片”图标是微软引入的一项功能&#xff0c;旨在让用户通…

《从零到全栈:CSS3新增属性》

CSS3 是层叠样式表(Cascading Style Sheets)的最新版本,用于定义网页的外观和样式。它不仅扩展了 CSS2 的功能,还引入了许多新特性,使得网页设计更加灵活和强大。本文将详细介绍 CSS3 的概念、新增选择器、属性以及一些高级应用。 一、CSS3 概念 CSS3 是一种用于描述网页外…

边缘计算收益低的三大指标

边缘计算收益低的三大指标主要包括以下方面&#xff1a; 1. 资源贡献不足&#xff1a; 边缘计算的收益通常基于所提供的带宽、存储和计算资源来计算。如果设备的网络带宽有限、在线时间短或提供的存储容量较小&#xff0c;可能无法满足平台设定的最低贡献标准&#xff0c;从而导…

DAC工作原理及选型

DAC工作原理及选型 文章目录 DAC工作原理及选型前言一、DAC基本工作原理二、DAC的性能参数1.静态性能参数2.动态性能参数 三、DAC的结构四、DAC选型 前言 本文主要是介绍一下模数转换器的基本工作原理和相关性能参数。数模转换器&#xff08;DAC&#xff09;的相关介绍见文章 …

information_schema.processlist 表详解

information_schema.processlist 表&#xff08;或 SHOW PROCESSLIST; 命令&#xff09;用于查看 MySQL 当前所有的连接进程&#xff0c;帮助管理员监控数据库活动并排查性能问题。以下是该表的字段及其具体含义&#xff1a; &#x1f539; information_schema.processlist 字段…

Qt 开源音视频框架模块之QtAV播放器实践

Qt 开源音视频框架模块QtAV播放器实践 1 摘要 QtAV是一个基于Qt的多媒体框架&#xff0c;旨在简化音视频播放和处理。它是一个跨平台的库&#xff0c;支持多种音视频格式&#xff0c;并提供了一个简单易用的API来集成音视频功能。QtAV的设计目标是为Qt应用程序提供强大的音视…