Flask无法加载CSS及其他HTML文件，需配置哪些必要设置？

Problem Background #

Project Structure #

code.py
templates/
    css/
    index.html

Flask Code (code.py) #

from flask import Flask, url_for
from flask import render_template
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
if __name__ == "__main__":
    app.run()

HTML Code (templates/index.html) #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header>
        <img class="resize" src="./pictures/apptek_logo.png" alt="apptek_logo">
        <nav>
            <ul class="nav-links">
                <li class="active"><a href="./index.html">Home</a></li>
                <li><a href="./contact.html">Contact</a></li>
            </ul>
            <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
            <script type="text/javascript">
                $(document).on('click', 'ul li', function(){
                    $(this).addClass('active').siblings().removeClass('active')
                })
            </script>
        </nav>
    </header>
</body>
</html>

Issue: Unable to load CSS files and other HTML pages (like contact.html). Are there necessary configurations needed in Flask?

Solution #

Hey there, let's break down why your assets and pages aren't loading, and fix them using Flask's standard conventions:

1. Fix Static Files (CSS, Images) Setup #

Flask has a strict default rule for static assets (CSS, images, JS): they must live in a static folder at your project root, not inside templates. Your current structure puts css under templates, which Flask won't recognize as a valid static directory.

First, adjust your project structure to match Flask's requirements:

your-project/
├── code.py
├── templates/
│   ├── index.html
│   └── contact.html
└── static/
    ├── css/
    │   └── style.css
    └── pictures/
        └── apptek_logo.png

Next, update your HTML to use Flask's url_for helper to reference static files (this is the most reliable method, as it handles routing correctly even if your app is served under a subpath):

• For CSS:

  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  

• For the logo image:

  <img class="resize" src="{{ url_for('static', filename='pictures/apptek_logo.png') }}" alt="apptek_logo">
  

2. Add Routes for Additional HTML Pages #

Right now, your Flask app only has a route for the homepage (/). To make contact.html accessible, you need to add a corresponding route in code.py:

from flask import Flask, url_for, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

# Add this route to serve the contact page
@app.route('/contact')
def contact():
    return render_template('contact.html')

if __name__ == "__main__":
    app.run(debug=True)  # Debug mode auto-reloads on changes and shows error details!

3. Fix Navigation Links #

Your current links use relative paths like ./index.html, which can break if your app's URL structure changes. Instead, use url_for to generate dynamic, correct URLs:

<ul class="nav-links">
    <li class="active"><a href="{{ url_for('index') }}">Home</a></li>
    <li><a href="{{ url_for('contact') }}">Contact</a></li>
</ul>

Quick Check for jQuery #

Your jQuery script loaded from a CDN is totally fine—just keep it placed before your custom script (which you already do) so jQuery is available when your click handler runs.

Once you make these changes, restart your Flask app (or let debug mode auto-reload it) and everything should load correctly!

内容的提问来源于stack exchange，提问作者Yuri Burkov