0

I have a problem when rendering template in flask it doesn't recongnize the CSS file but this issue occurs only when I give more than one parameter to the funtion.

for this example the css is working on the page:

@app.route('/test/<usrn>')
def test(usrn):
    return render_template('test.html')

and it looks like this

but for this one the css isn't working:

@app.route('/test/<usrn>/<grad>')
def test(usrn,grad):
    return render_template('test.html')

and now it looks like this

Strucure of test.html:

{% extends 'layout.html' %}

{% block body %}
    <header>
        <div class="container">
            <div id="logo">
                <a href="{{ url_for('index') }}" id="logo"><img src="../static/images/logo2.png"></a>
            </div>
            <nav>
                <ul>
                    <li><a href="{{ url_for('index') }}">Dashboard</a></li>
                    <li><a href="{{ url_for('clasament') }}">Clasament</a></li>
                    <li><a href="{{ url_for('profil') }}">Profil ({{ uname }})
                    </a></li>
                    <li><button onclick="window.location.href='{{ url_for('logout') }}'" class="input_btn1">Log out</button></li>
                </ul>
            </nav>
        </div>
    </header>
{% endblock %}

Structure of layout.html:

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="../static/css/main.css?q=1280549780">
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

Directory structure:

  • Website
    • static
      • css
        • main.css
      • images
      • img
    • templates
      • layout.html
      • test.html
    • mongo_connect.py
Ax M
  • 330
  • 3
  • 15

1 Answers1

0

Your path to the CSS file is hard-coded: this is generally a bad idea, as once you move up the path to a new "folder" this CSS path becomes invalid.

The best method is to use url_for to generate a consistent URL for your static assets.

<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='css/main.css') }}?q=1280549780">

You should also apply the same change to your other static assets such as images, Javascript files etc.

Documentation for url_for

Matt Healy
  • 18,033
  • 4
  • 56
  • 56
  • I tried that but it doesn't work unfortunately. – Ax M Apr 22 '18 at 12:03
  • When you say it doesn't work - what does this mean? In your web console do you get a 404 error for the CSS file? In your web server logs, what URL path is being queried to get the CSS file? – Matt Healy Apr 22 '18 at 12:05
  • `GET /test/alex/1 HTTP/1.1" 200 - 127.0.0.1 - - [22/Apr/2018 15:54:17] "GET /test/static/images/logo2.png HTTP/1.1" 404 -` Yeah.. its a 404 error – Ax M Apr 22 '18 at 12:55
  • The fact that you're seeing "/test/" in the query for the png file implies that you haven't set url_for correctly on that particular tag. Also, you haven't set STATIC_FOLDER to some different value in the Flask config at all? – Matt Healy Apr 22 '18 at 12:58
  • Actually this is what it says `27.0.0.1 - - [22/Apr/2018 15:59:58] "GET /test/alex/1 HTTP/1.1" 200 - 127.0.0.1 - - [22/Apr/2018 15:59:58] "GET /static/css/main.css%3Fq%3D1280549780 HTTP/1.1" 404 - 127.0.0.1 - - [22/Apr/2018 15:59:58] "GET /test/static/images/logo2.png HTTP/1.1" 404 - 127.0.0.1 - - [22/Apr/2018 15:59:58] "GET /favicon.ico HTTP/1.1" 404 -` – Ax M Apr 22 '18 at 13:01
  • I see, there is a mistake in my answer with the CSS file which I have just corrected. It still looks like the image path hasn't been updated with url_for – Matt Healy Apr 22 '18 at 13:03