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

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

news 来源：原创 2025/6/24 5:57:36

your_project/
├── app.py          # Flask 应用主文件
├── templates/      # 存放 HTML 模板
│   └── index.html
└── static/         # 存放静态文件├── css/│   └── style.css├── js/│   └── script.js└── images/└── tupian.png

修改 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>

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)