当前位置: 首页 > 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.lryc.cn/news/574349.html

相关文章:

  • EEG分类 - Theta 频带 power
  • C++ Vector 基础入门操作
  • QML革命:下一代GUI开发的核心优势详解
  • 论文笔记:Answering POI-Recommendation Questions using TourismReviews
  • 单片机——浮点数转换4位数码管显示
  • 【笔记】在Cygwin上使用mintty连接wsl
  • 1.2、CAN总线帧格式
  • Apache SeaTunnel Flink引擎执行流程源码分析
  • DeepSeek今天喝什么随机奶茶推荐器
  • 如何利用Charles抓包工具提升API调试与性能优化
  • 组件化设计核心:接口与实现分离(C++)
  • 拼团系统多层限流架构详解
  • 《去哪儿网Redis高并发实战:从问题定位到架构升级》
  • 边缘-云协同智能视觉系统:实时计算与云端智能的融合架构
  • C++的前世今生-C++11
  • 《哈希表》K倍区间(解题报告)
  • go channel用法
  • 【android bluetooth 框架分析 04】【bt-framework 层详解 8】【DeviceProperties介绍】
  • Netty内存池分层设计架构
  • 【大厂机试题解法笔记】高效货运
  • 互联网大数据求职面试:从Zookeeper到Flink的技术探讨
  • 跨越十年的C++演进:C++11新特性全解析
  • TCP客户端发送消息失败(NetAssist做客户端)
  • 【C++】第十二节——详解list(上)—(list的介绍和使用、模拟实现)
  • Origin绘制三Y轴柱状图、点线图、柱状点线图
  • el-cascader 设置可以手动输入也可以下拉选择
  • 原生微信小程序网络请求与上传接口封装实战指南
  • 【DeepSeek实战】2、DeepSeek特训:Function Calling与ReAct双引擎驱动大模型智能升级实战指南
  • 《高等数学》(同济大学·第7版)第六章 定积分的应用 第一节定积分的元素法
  • matlab实现大地电磁二维正演