Location of /static/ changes to /something/static/ when setting app.route(/something/)

Question

Loading the route index() with index.html works - it extends from base.html. As do some other templates which do not have <arguments> in the route path.

However, at app.route('/channel/') I see Flask Server trying to serve statics (loaded from base.html) from /channel/static/etc instead of /static/etc and thus, the CSS fails to render. Whatever I put in that app.route('/here/') is where Flask tries to render statics from on that page: /here/static/etc and hence the CSS/JS 404s.

I've tried changing the loading of static content in base.html from the below:

<link href="static/css/font-face.css" rel="stylesheet" media="all">

to

<link href="/static/css/font-face.css" rel="stylesheet" media="all">

This hasn't fixed the issue. I eventually got a blank page with no content rendering at all. Made me think its something to do with the app.route() function.

App structure:

<dock>
  <bot>
  <nginx>
  <zigweb>
    <app>
        <templates>
             base.html
             etc.html
        <static>
            <css>
            <etc>

I'm using the Flask development server.

console on loading channel.html

INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:58:08] "GET /channel/launch_logic HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:58:09] "GET /channel/static/images/icon/signally.png HTTP/1.1" 404 -
INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:58:09] "GET /channel/static/images/icon/avatar-icon.png HTTP/1.1" 404 -

console on loading index.html

INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:59:19] "GET / HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:59:20] "GET /static/vendor/animsition/animsition.min.css HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:59:20] "GET /static/vendor/font-awesome-4.7/css/font-awesome.min.css HTTP/1.1" 200 -
INFO:werkzeug:127.0.0.1 - - [08/Nov/2019 13:59:21] "GET /static/vendor/bootstrap-4.1/bootstrap.min.css HTTP/1.1" 200 -

BASE.HTML https://pastebin.com/9FgqE2z9

CHANNEL.HTML


{% extends "base.html" %}
{% block content %}
<h1>hello</h1>

{% endblock %}

Routes.py (for channel())

@app.route('/channel/<username>')
def channel(username):
    user = User.query.filter_by(username=username).first()
    return render_template('channel.html', user=user)

Did you try using url_for('static', 'filename') instead /static/vendor/.../style.css? — Srikanth Chekuri, Nov 08 '19 at 09:11

score 0 · Answer 1 · answered Nov 08 '19 at 09:59

In base.html youve specified the URL for the images as static/images/icon/signally.png. In this case the URL in relative to the current path, thus it becomes /channel/static/images/icon/signally.png as the base for the current path is /channel/.

You can change the image source to src="/static/images/icon/signally.png" and it would correctly resolve the path.

Or, which is probably more desirable, you can use url_for('static', '<filename>') as someone mentioned in the comments. In that case, Flask will automatically resolve the image source for you. One of the benefits is that if you have a custom static folder for a blueprint, you dont need to worry about specfying it explicitely, but you'll only need to write the relative name of the file.

Location of /static/ changes to /something/static/ when setting app.route(/something/)

1 Answers1