html - 在 Flask 路由中使用变量时如何修复 CSS 404 错误

Question

我正在编写一个简单的网络应用程序来显示书评。成功的搜索会返回指向书名的链接——当用户单击链接时，我试图将被单击的书的 ISBN 传递给 url_for 方法，然后呈现相应的模板。

我的 Flask 服务器的输出显示如下，但没有渲染 CSS。

"GET /book_data/0316769177 HTTP/1.1" 200 -
"GET /book_data/static/style/style.css HTTP/1.1" 404

search_results.html:

{% for book, isbn in book_dict.items() %}
    <li>
        <a id="book_link" href="{{ url_for('book_data', isbn=isbn) }}">{{ book }}</a>
    </li>
{% endfor %}

应用程序.py:

@app.route("/book_data/<isbn>", methods=["GET"])
def book_data(isbn):

    valid_login = True

    results = db.execute('SELECT * FROM books WHERE isbn = :isbn',
                         {'isbn': isbn}).fetchall()

    book_info = results[0]

    return render_template("book_data.html",
                           valid_login=valid_login,
                           book_info=book_info)

book_data.html:

{% extends "layout.html" %}

{% block login %}

    <div>
        <a class="login_link" href="{{ url_for('signup') }}">Sign Up</a>
        {% if valid_login == True %}
            <a class="login_link" href="{{ url_for('logout') }}">Logout</a>
        {% endif %}
    </div>

{% endblock %}

{% block body %}

    <h> CSS not working on this page</h>

{% endblock %}

所有预期的 CSS 都来自 layout.html。

我所有的 html 页面都扩展了 layout.html(并且 CSS 对除此之外的所有其他页面都按预期运行。

当我单击 search_results.html 中的链接时，将显示以下 URL(如预期的那样):127.0.0.1:5000/book_data/0316769177

Answer 1

服务器从/book_data/static/style/style.css 而不是/static/style/style.css 获取 style.css 文件。

为了解决这个问题，在layout.html中尝试替换:

<link rel="stylesheet" href="static/style/style.css">

通过

<link rel="stylesheet" href="/static/style/style.css">