How Do You Serve Static Files in Flask?
James W.
The Problem
If you are trying to serve static files in a Flask application, you may have come across an issue when trying to access a static file in your project’s directory.
Perhaps you have added your files to your project’s root directory or stored them within folders in the root directory, like this:
App1/
│ app1.py
│
└───css/
| │ style.css
|
└───img/
| │ myimage.png
|
└───templates/
| │ index.html
|
| views.py
And you have set up your template’s HTML to reference these static files with absolute file paths, like so:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/style.css">
<title></title>
</head>
<body>
<img src="/img/myimage.png">
</body>
</html>
But when you run your Flask app, the static files are not found and do not show up on your webpage.
The problem here is that you haven’t used the correct file structure for static files in a Flask application.
The Solution
A Flask application has some default settings for static files that need to be followed.
Ideally, you should use a dedicated HTTP server (like Apache or Nginx) in front of your Flask application to serve your static files in production.
You need to create a folder called static in your application’s root directory to store all your static files. Then you can use relative file paths to reference these static files, but it is best practice to use the url_for() function to create absolute URL references to static files.
Here is an example of the static file in a directory:
App1/
│ app1.py
│
└───static/
│ └───css/
│ | │ style.css
| |
│ └───img/
│ │ myimage.png
|
└───templates/
| │ index.html
|
| views.py
To reference the static files using the url_for() function, pass in the name of the directory – static in this case – and the keyword argument of filename= followed by your static file name.
Here is an example of the url_for() function to reference an image from the static folder:
<img src="{{url_for('static', filename='example_image.png')}}">
And here is an index.html file in a templates folder that references a style.css file and a myimage.png file, which are both in the static folder:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}">
<title></title>
</head>
<body>
<img src="{{url_for('static', filename='img/myimage.png')}}">
</body>
</html>
Flask automatically creates a static view that serves static files from a folder named static in your application’s directory.
You can also use the url_for() method to allow for more dynamic URLs. Its use reduces the amount of modification needed in the code if something needs to change in your URL references.
Related Answers
- Auto-reloading a Flask application
- Difference Between `json.dumps()` and `flask.jsonify()`
- How do I Configure Flask Dev Server to be Visible Across the Network?
- How Do You Get POSTed JSON in Flask?
- How can I get the named parameters from a URL using Flask?
- How do you access the query string in Flask routes?
- How do you get the Data Received in a Flask Request?
- Redirect to a URL in Flask
- How Do I Return a JSON Response from a Flask View?
- ValueError: View Function Did Not Return a Response
- RuntimeError: Working Outside of Application Context