3

I can't get flask run my css and js files. It just opens a page where all the images are missing and all the textfields and buttons etc. are all over the place. So I found out that the relevant files need to be in the static folder and the path has to be adjusted accordingly like at CSS Problems with Flask Web App or at External JavaScript file is not getting added when running on Flask. I implemented this. But it didn't really help. Apparently it's a common problem. I've tried a few other suggestions/solutions mostly focusing on the snytax and parentheses etc. here on stackoverflow but none helped. So my folder structure is this:


  /myproject
      /static
         /css_image
            script.js
            img1.png
            asdf.css
      /templates
         index.html
      app.py

Here are a few lines from the HTML-Code for the above paths: 

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='css_image/asdf.css')}}">
<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='css_image/img1.png')}}">
<script  src="{{ url_for('static', filename='css_image/script.js')}}" data-turbolinks-track="reload"></script>

My python-flask code looks like this:

from flask import Flask, url_for, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template("index.html")

if __name__ == '__main__':
    app.run()

After I run the flask, I get the following on the output:

127.0.0.1 - - [07/Oct/2019 14:10:06] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/img1.png HTTP/1.1" 404 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/asdf.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/script.js HTTP/1.1" 404 -

I should also add, the html file is working just fine, when I open it directly by clicking on the file.

artre
  • 311
  • 4
  • 14

4 Answers4

7

When you point your html to the static file, you have to give the path from the static directory root:

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

That being said, it is not your only problem since some static files with the right path were not found.

What happens when you supply the path to your static files when you create your app? i.e.:

app = Flask(__name__,
            static_folder='static',
            template_folder='templates')

[EDIT]: Two things you did not mention though: what is the name of your python file and where is it in your structure? I copied paste your code and it works fine, as evidenced with this log:

 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/asdf.css HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/script.js HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/img1.png HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /favicon.ico HTTP/1.1" 404 -

The directory structure:

app.py
static/
    css_image/
        asdf.css  
        img1.png
        script.js
templates/
    index.html
qmeeus
  • 2,341
  • 2
  • 12
  • 21
  • hey thanks. But the root is correct in my path. That was a copy paste mistake from an older version.just corrected. Answer to your question: Same results. nothing changed. – artre Oct 07 '19 at 13:54
  • See the follow up question in my edit, the code works for me so there is something missing in your explanation – qmeeus Oct 07 '19 at 15:27
  • hi, I've edited my question to include the name and the directory of the python file. The directory structure is identical to yours. – artre Oct 07 '19 at 15:41
  • Any chance the permissions of the static folders are f**ed up? This is my last idea, afterwards, I can't help you :/ – qmeeus Oct 07 '19 at 15:45
  • I don't think so. Because I've managed to get the image files served, which also happen to be in the same folder, by simply refreshing the page countless times. So now it's only the two js and css files that flask doesn't serve. thank you btw for your effort and time – artre Oct 07 '19 at 15:55
  • try it with another browser and restart the app, sometimes, cache is a b*tch. On chrome, hit `ctrl+F5` to force refresh the page. Sorry that I couldn't help you more – qmeeus Oct 07 '19 at 16:12
  • Yea, I know cache can be a pain in the a..se. Anyways, I've already tried restarting the app and let it run on all the browsers, but to no avail.. totally appreciate the effort tho. Thx mate. – artre Oct 07 '19 at 16:24
  • Side step browser cachining completely. Okay you *can* disable this in the devtools->net tab, or.. 1) let `url_for` output go straight onto the page (instead of within an IMG/script `src` tag, basically a template file that only contains `{{ url_for( ~~ ) }}`. Reload the page and ensure its correct. Then hit that URL with `curl` which doesn't use caching. – v25 Oct 07 '19 at 18:12
2

You need to add the subdirectory css_image to the filename argument of the url_for function in the template:

{{ url_for('static', filename='css_image/script.js')}}

Side note: you appear to have done this on the second line of your template sample:

<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='css_image/img1.png')}}">

However the corresponding line from the console looks like this:

127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /css_image/img1.png HTTP/1.1" 404 -

This path should have been generated as /static/css_image/img1.png and worked correctly. I'm guessing you may have been playing around with the directory structure whilst trying to fix this, so I'd double check both the directory structure and code is correct

v25
  • 7,096
  • 2
  • 20
  • 36
  • thx. I think that was a copy paste mistake. The files are all in the right folders and the paths in the html file are all correct. Just checked it once more. – artre Oct 07 '19 at 13:49
1

ok finally I solved it. Such a banal solution though, and also it doesn't fully make sense to me, but it worked. So basically I moved the .css and .js files out of the "css_image" folder and changed their paths in the HTML-File from:

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='css_image/asdf.css')}}">
<script  src="{{ url_for('static', filename='css_image/script.js')}}" data-turbolinks-track="reload"></script

to

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='asdf.css')}}">
<script  src="{{ url_for('static', filename='script.js')}}" data-turbolinks-track="reload"></script>

Strangely, I didn't need to move the image files out of the css_image folder. Because flask serves them without a problem.

artre
  • 311
  • 4
  • 14
1

I found the solution: just put "/" before the folder where you have the file -> '/css_image/asdf.css' INSTEAD OF 'css_image/asdf.css'

Guillermo Arce
  • 11
  • 1