Link to Flask Static Files With Url_For

Link to Flask static files with url_for

You have by default the static endpoint for static files. Also Flask application has the following arguments:

static_url_path: can be used to specify a different path for the static files on the web. Defaults to the name of the static_folder folder.

static_folder: the folder with static files that should be served at static_url_path. Defaults to the 'static' folder in the root path of the application.

It means that the filename argument will take a relative path to your file in static_folder and convert it to a relative path combined with static_url_default:

url_for('static', filename='path/to/file')

will convert the file path from static_folder/path/to/file to the url path static_url_default/path/to/file.

So if you want to get files from the static/bootstrap folder you use this code:

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

Which will be converted to (using default settings):

<link rel="stylesheet" type="text/css" href="static/bootstrap/bootstrap.min.css">

Also look at url_for documentation.

Can't use static files via url_for in my Flask app

The first parameter to url_for is the endpoint name and 'static' is a special endpoint name to refer to the Static Files of your application:

Just create a folder called static in your package or next to your
module and it will be available at /static on the application.

To generate URLs for static files, use the special 'static' endpoint
name:

url_for('static', filename='style.css')

The file has to be stored on the filesystem as static/style.css.

So, given this:

<link ... href="{{ url_for('static', filename='styles.css') }}"> 

And assuming you create your Flask instance like this:

app = Flask(__name__)

Make sure your app file/folder structure is like this:

.
├── app.py
├── static
│   └── styles.css
└── templates
    └── app.html

If you are organizing your JS and CSS files like this:

.
├── app.py
├── static
│   ├── css
│   │   └── styles.css
│   └── js
│       └── app.js
└── templates
    └── app.html

Then you have to appropriately change the arguments to url_for like this:

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

If you named the static folder to something else (ex. "assets"), then you have to specify that new name to the static_folder parameter when creating the Flask instance.

app = Flask(__name__,
            static_folder="assets")

You can also check the Flask debugger logs that the static files are accessed correctly:

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [29/Dec/2019 20:30:44] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Dec/2019 20:30:44] "GET /static/css/styles.css HTTP/1.1" 200 -

Or your browser's debugger/inspection tools that it is indeed downloading the files correctly:

Flask, url_for() not linking static file

In addition to the answer given above, this might also occur sometimes if your browser has already cached the CSS file. You can force your browser to refresh the contents using Ctrl+f5 on your keyboard each time you add new code in your style.css file.

Flask (Python) - Stylesheet url_for code for image in a parallel folder

You are already in static when you're in the CSS file. So why not write the path directly:

body {
  background-image: url('/static/images/bckgrnd.jpg');
}

You should also try url({{ url_for('static', filename='images/bckgrnd.jpg') }});. Notice the missing forward slash in front of images. If that doesn't work it means Jinja is used only on the file that's used as input in flask's render_template.

---

Related Topics