Flask is loading static files from a different path when a route is called

Question

I have 2 route functions, one to get all users and one to get a specific user. Both functions render the same template. The first function works fine, the problem is with the second one. When rendering the template it tries to load static files from another directory.

I tried using a different template for each one and the problem remained.

Get all users route:

@app.route('/users')
def list_users():
    users = Users.query.all()
    return render_template('users.html', users=users)

Get one user route:

@app.route('/users/<username>')
def get_user(username):
    user = Users.query.filter_by(name=username).first()
    if user:
        return render_template('users.html', users=[user])

Template rendered by get_user route function:

127.0.0.1 - - [07/Aug/2019 13:35:56] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Aug/2019 13:35:57] "GET /favicon.ico HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/Ana HTTP/1.1" 200 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/fontawesome-free/css/all.min.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/css/sb-admin-2.min.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/img/uatronica_black_transparent.png HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/jquery/jquery.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/bootstrap/js/bootstrap.bundle.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/jquery-easing/jquery.easing.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/js/sb-admin-2.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/vendor/chart.js/Chart.min.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/js/demo/chart-area-demo.js HTTP/1.1" 404 -
127.0.0.1 - - [07/Aug/2019 13:36:06] "GET /users/static/js/demo/chart-pie-demo.js HTTP/1.1" 404 -

It is trying to load css files from /users/static/ instead /static/. Why is that?

If the template uses relative paths, `http://host:port/users/Ana`'s "current directory" would be /users/, probably. — h4z3, Aug 07 '19 at 13:15
@DataFramed The problem is solved, check Daniel answer. Thanks. — João Matos, Aug 07 '19 at 13:35

score 4 · Accepted Answer · edited Aug 07 '19 at 15:59

You are using relative paths in your template, so the final URL is relative to whatever URL you're at. When viewing /users, if the template links to static/css/admin.css, it becomes /users/static/css/admin.css. If the path starts with a /, it is an absolute URL and won't do this.

Instead, use url_for, which generates absolute URLs no matter where you are and how the app is deployed.

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

This becomes /static/css/admin.css.

score 0 · Answer 2 · answered Aug 07 '19 at 13:20

0

Please use the below code.

Get one user route:
@app.route('/users/<username>')
def get_user(username):
 user = Users.query.filter_by(name=username).first()
 return render_template('users.html', users=user)

Additionally please share the html page users.html for review.

answered Aug 07 '19 at 13:20

DataFramed

1,491
16
21

Questions for more code should be comments. This is not an answer to OPs problem either - this is just style preference(?) and probably wrong because `user` is not an iterable (that's why it was put in a single-element list). – h4z3 Aug 07 '19 at 13:26

Flask is loading static files from a different path when a route is called

2 Answers2