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

运行效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/979983.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

DeepSeek开源周 Day04:从DualPipe聊聊大模型分布式训练的并行策略

DualPipe简介 今天是DeepSeek开源周的第四天&#xff0c;官方开源了一种新型并行计算优化策略——DualPipe。 其实大家阅读过Deepseek-V3技术报告的同学&#xff0c;对这个技术并不陌生。 开源地址&#xff1a;https://github.com/deepseek-ai/DualPipe 核心亮点 DualPipe&…

基于C#的CANoe CLR Adapter开发指南

一、引言 CANoe 是一款广泛应用于汽车电子开发和测试的工具&#xff0c;它支持多种编程接口&#xff0c;方便开发者进行自定义扩展。CANoe CLR Adapter 允许我们使用 C# 语言与 CANoe 进行交互&#xff0c;充分利用 C# 的强大功能和丰富的类库。本文将详细介绍如何基于 C# 进行…

Redis实现滑动窗口限流实践(Redisson限流器版)

文章目录 一、滑动窗口限流原理二、Redisson限流器三、代码示例1. 引入依赖2. 配置Redis连接3. 使用Redisson限流器4. 使用示例 四、总结五、其他优化方向六、代码说明 在高并发系统中&#xff0c;为了保护系统稳定性&#xff0c;防止突发流量压垮服务&#xff0c;限流是一种常…

实现Python+Django+Transformers库中的BertTokenizer和BertModel来进行BERT预训练,并将其应用于商品推荐功能

一、环境安装准备 #git拉取 bert-base-chinese 文件#创建 虚拟运行环境python -m venv myicrplatenv#刷新source myicrplatenv/bin/activate#python Django 集成nacospip install nacos-sdk-python#安装 Djangopip3 install Django5.1#安装 pymysql settings.py 里面需要 # 强制…

ollama本地部署DeepSeek-R1大模型使用前端JS调用的详细流程

以下是关于如何在本地部署 DeepSeek-R1 大模型&#xff08;通过 Ollama&#xff09;&#xff0c;并使用前端 JavaScript 调用其功能的详细流程。 前提条件 硬件要求&#xff1a; 建议至少 16GB RAM&#xff08;运行较小模型如 1.5B 或 7B 参数版本&#xff09;&#xff0c;如果…

Rocky Linux 8.5 6G内存 静默模式(没图形界面)安装Oracle 19C

Oracle19c 下载地址 Database Software Downloads | Oraclehttps://www.oracle.com/database/technologies/oracle-database-software-downloads.html#db_ee 目录 一、准备服务器 1、服务器可以克隆、自己装 2、修改主机名 3、重启 4、关闭selinux 5、关闭防火墙 5.1、…

【Qt QML】QML鼠标事件(MouseArea)

QML鼠标事件全面解析 一、MouseArea基础概念 在 QML 中,鼠标事件是处理用户与界面元素交互的重要部分。QML 提供了多种方式来处理鼠标事件,MouseArea 是 QML 中用于处理鼠标事件的核心元素,它可以覆盖在其他元素之上,捕获鼠标操作并触发相应的信号。 1、基本用法 import …

【Project】基于Prometheus监控docker平台

一、设计背景 1.1项目简介 本项目旨在创建一个全面的容器化应用程序监控解决方案&#xff0c;基于Prometheus监控Docker平台上的各种服务。在当今的软件开发环境中&#xff0c;容器化技术已成为一种关键的工具&#xff0c;使应用程序能够更快速、可靠地交付和扩展。然而&…

SV——Clocking block的应用

在system verilog中&#xff0c;clocking block是一种简化时钟域信号同步和采样的机制。可以帮助验证工程师简化复杂时序问题&#xff0c;尤其是在测试平台中&#xff0c;既要对信号进行驱动&#xff0c;又要对信号进行采样。 clocking block块一般有以下应用场景&#xff1a;…

RabbitMQ 的介绍与使用

一. 简介 1> 什么是MQ 消息队列&#xff08;Message Queue&#xff0c;简称MQ&#xff09;&#xff0c;从字面意思上看&#xff0c;本质是个队列&#xff0c;FIFO先入先出&#xff0c;只不过队列中存放的内容是message而已。 其主要用途&#xff1a;不同进程Process/线程T…

unity pico开发 一:环境准备

文章目录 前言一些容易混淆的概念下载SDK导入SDK配置环境注册PICO APP下载PDC 前言 本文将配置pico开发所有必须的环境 官方文档 一些容易混淆的概念 OpenXR&#xff1a;OpenXR是国际通用的vr开发协议&#xff0c;目的是为了解决各个硬件设备自己搞自己的sdk&#xff0c;导致…

Java数据结构_一篇文章了解常用排序_8.1

本文所有排序举例均默认为升序排列。 目录 1. 常见的排序算法 2. 常见排序算法的实现 2.1 插入排序 2.1.1 基本思想&#xff1a; 2.1.2 直接插入排序 2.1.3 希尔排序&#xff08;缩小增量排序&#xff09; 2.2 选择排序 2.2.1 基本思想&#xff1a; 2.2.2 直接选择排…

Uniapp开发微信小程序插件的一些心得

一、uniapp 开发微信小程序框架搭建 1. 通过 vue-cli 创建 uni-ap // nodejs使用18以上的版本 nvm use 18.14.1 // 安装vue-cli npm install -g vue/cli4 // 选择默认模版 vue create -p dcloudio/uni-preset-vue plugindemo // 运行 uniapp2wxpack-cli npx uniapp2wxpack --…

【Mark】记录用宝塔+Nginx+worldpress+域名遇到的跨域,301,127.0.0.1,CSS加载失败问题

背景 想要用宝塔搭建worldpress&#xff0c;然后用域名直接转https&#xff0c;隐藏掉ipport。 结果被折磨了1天&#xff0c;一直在死活在301&#xff0c;127.0.0.1打转 还有css加载不了的情况 因为worldpress很多是301重定向的&#xff0c;所以改到最后我都不知道改了什么&am…

0x03 http协议和分层架构

HTTP协议 简介 Hyper Text Transfer Protocol&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则 http协议基于TCP协议&#xff1a;面向连接&#xff0c;安全基于请求-响应模型&#xff1a;一次请求对应一次响应HTTP协议是无状态的协议&#xff…

汽车小助手智能体

汽车小助手&#xff1a;智能驱动汽车服务新体验 链接&#xff1a;文心智能体平台AgentBuilder | 想象即现实 文心智能体平台AgentBuilder&#xff0c;是百度推出的基于文心大模型的智能体平台&#xff0c;支持广大开发者根据自身行业领域、应用场景&#xff0c;选取不同类型的…

20250225-代码笔记03-class CVRPModel AND other class

文章目录 前言一、class CVRPModel(nn.Module):__init__(self, **model_params)函数功能函数代码 二、class CVRPModel(nn.Module):pre_forward(self, reset_state)函数功能函数代码 三、class CVRPModel(nn.Module):forward(self, state)函数功能函数代码 四、def _get_encodi…

十一、大数据治理平台总体功能架构

大数据治理平台的功能架构图中心主题&#xff1a;数据治理 核心重点是建立健全大数据资产管理框架&#xff0c;确保数据质量、安全性、可访问性和合规性。 大数据治理平台总体功能架构图 关键功能领域 1.数据资产平台&#xff08;左侧&#xff09; 此部分主要关注数据资产本身…

算法与数据结构(相交链表)

题目 思路 1.哈希集合 因为要求是否存在相交节点&#xff0c;那么我们就可以利用哈希集合先将listA链表里面的所有数据存入&#xff0c;然后访问listB&#xff0c;判断其是否有节点在哈希集合中&#xff0c;若存在&#xff0c;则说明此节点为相交的节点。若遍历完之后仍没有发…

git和gitee在idea中的使用

1.下载git 2.注册一个gitee且创建一个项目 3.在idea的plunge中下在gitee 4.登录gitee 别人使用的话复制 粘贴 commit提交到本地仓库 push推送到云端仓库