Flask view with parameter not loading css

Question

I get this weird issue.

I defined my Flask like the following:

blog = Blueprint(
    'blog',
    __name__,
    template_folder='templates',
    static_folder='static'
)
@blog.route("/post")

def post():
    return render_template('post.html')

The http://localhost:5000/blog/post loads the css correctly, however, if I added a parameter to the post(), the css can not be loaded.

@blog.route("/post/<fileid>")
def post(fileid):
    page = download_file_from_google_drive(fileid)
    page = Markup(markdown.markdown(page))
    return render_template('post.html', page)

The post.html uses the template. and looks like the following:

{% extends "base.html" %}


{% block content %}

    <!-- Page Header -->
    <header class="masthead" style="background-image: url('static/img/post-bg.jpg')">
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">
            <div class="post-heading">
              <h1>Man must explore, and this is exploration at its greatest</h1>
              <h2 class="subheading">Problems look mighty small from 150 miles up</h2>
              <span class="meta">Posted by
                <a href="#">Start Bootstrap</a>
                on August 24, 2017</span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Post Content -->
    <article>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">

            {{ page }}

          </div>
        </div>
      </div>
    </article>

    <hr>

{% endblock %}

Is there something wrong with my BluePrint set up?

Can't saw the css load statement in your template file. – stamaimer Aug 17 '17 at 05:32 — stamaimer, Aug 17 '17 at 05:32

score 2 · Answer 1 · answered Aug 17 '17 at 05:06

There is nothing wrong with your Python code at all.

However, looks like you are loading CSS using relative path to the current page, which implies that if you are on the page with the URL = /blog/post/<fileid>, your CSS (well, anything, whose path is specified relative to the current path) gets loaded like this: /blog/post/<fileid>/<whatever>.

You should try loading your CSS using absolute path. That would look like this: /post.css.

So, the only thing you need to change is your base.html template.

If this is not solving your problem, open the developer console and look at the output. If you are smart enough, you can figure the answer yourself.

Flask view with parameter not loading css

1 Answers1