Flask框架index.html里引用的本地的js和css或者图片_flask 框架 css 引图片写法-优快云博客

本文链接：https://blog.youkuaiyun.com/l1o3v1e4ding/article/details/148848560

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_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')  # 渲染包含本地静态文件的模板

if __name__ == '__main__':
    app.run(debug=True)