How to fix CSS 404 error when using variables in Flask route

Question

I am writing a simple web application to display book reviews. A successful search returns links to book titles -- when a user clicks on a link, I am attempting to pass the ISBN of the book that was clicked to the url_for method and then render the respective template.

The output from my Flask server displays the following and no CSS is rendered.

"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 %}

application.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 %}

All of the expected CSS is from layout.html.

All of my html pages extend layout.html (and CSS is functioning as expected for all of my other pages except this.

When I click a link from search_results.html, the following URL is displayed (as expected): 127.0.0.1:5000/book_data/0316769177

ASSILI Taher ASSILI Taher · Accepted Answer · 2019-05-22T04:58:06

The server get the style.css file from /book_data/static/style/style.css instead of /static/style/style.css.

To solve this issue,in layout.html try to replace:

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

By

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

How to fix CSS 404 error when using variables in Flask route

1 Answers