当前位置: 首页 > news >正文

Flask框架index.html里引用的本地的js和css或者图片

  1. 项目目录结构
    要保证项目目录结构如下:
your_project/
├── app.py          # Flask 应用主文件
├── templates/      # 存放 HTML 模板
│   └── index.html
└── static/         # 存放静态文件├── css/│   └── style.css├── js/│   └── script.js└── images/└── tupian.png
  1. 修改 index.html 文件
    运用 Flask 的 url_for() 函数来生成静态文件的 URL,示例如下:
<!DOCTYPE html>
<html>
<head><!-- 引用本地 CSS 文件 --><link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body><!-- 页面内容 --><!-- 引用本地 JS 文件 --><script src="{{ url_for('static', filename='js/script.js') }}"></script><!-- 引用本地 图片 --><img src="{{ url_for('static', filename='images/tupian.png') }}">
</body>
</html>
  1. Flask 应用配置
    确保 Flask 应用正确设置了静态文件目录(默认就是 static):
from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def index():return render_template('index.html')  # 渲染包含本地静态文件的模板if __name__ == '__main__':app.run(debug=True)
http://www.lqws.cn/news/496189.html

相关文章:

  • C#采集电脑硬件(CPU、GPU、硬盘、内存等)温度和使用状况
  • 深入理解PHP中的生成器(Generators)
  • 新高考需求之一
  • 【GNSS定位算法】Chapter.2 导航定位算法软件学习——Ginav(二)SPP算法 [2025年6月]
  • 系统规划与管理师(第2版)第9章思维导图发布
  • Java面试核心考点复习指南
  • 智能交通中的深度学习应用:从理论到实践
  • 深入解析 Windows 文件查找命令(dir、gci)
  • 在cursor中,配置jdk和maven环境,安装拓展插件
  • AngularJS
  • 【笔记】在Cygwin上使用mintty连接wsl
  • 【软考高级系统架构论文】论企业集成架构设计及应用
  • 海拔案例分享-门店业绩管理小程序
  • 【ARM 嵌入式 编译系列 7.4 -- GCC 链接脚本中 ASSERT 函数】
  • 如何利用Charles抓包工具提升API调试与性能优化
  • QT6(46)5.2 QStringListModel 和 QListView :列表的模型与视图的界面搭建与源代码实现
  • Netty内存池分层设计架构
  • 本地文件深度交互新玩法:Obsidian Copilot的深度开发
  • 【streamlit 组件样式定位与修改】
  • 数字孪生:为UI前端设计带来沉浸式交互新体验
  • 【2025CVPR】基于脉冲神经网络的能效目标检测模型:Multi-scale Spiking Detector(MSD)深度解析
  • PillarNet: Real-Time and High-PerformancePillar-based 3D Object Detection
  • 稳定币走向监管:新秩序下的数字货币新局
  • Redis集群性能优化实战指南
  • 96道Docker 容器高频题整理(附答案背诵版)
  • 设计模式 - 工厂方法
  • 在AI时代看清糖网:糖尿病视网膜病变筛查的转型之路
  • CARLsim开源程序 是一个高效、易用、GPU 加速的软件框架,用于模拟具有高度生物细节的大规模脉冲神经网络 (SNN) 模型。
  • Word2Vec 原理是什么
  • mysql一张表,其中一个字段设置了唯一索引,又设置了普通索引,查询的时候很慢,没有走普通索引,是const