How do you use url_for in Flask to reference a file in a folder? For example, I have some static files in the static folder, some of which may be in subfolders such as static/bootstrap.
When I try to serve a file from static/bootstrap, I get an error.
<link rel=stylesheet type=text/css href="{{ url_for('static/bootstrap', filename='bootstrap.min.css') }}">
I can reference files that aren't in subfolders with this, which works.
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.min.css') }}">
What is the correct way to reference static files with url_for? How do I use url_for to generate urls to static files at any level?
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.
In my case I had special instruction into nginx configuration file:
location ~ \.(js|css|png|jpg|gif|swf|ico|pdf|mov|fla|zip|rar)$ {
try_files $uri =404;
}
All clients have received '404' because nginx nothing known about Flask.
The primary configuration file is /etc/nginx/nginx.conf on Linux. It may be similar on Windows.
Related
I am trying to serve a static image to a css file using flask. I am using render_template() to to get the html file, and I have a static directory for my css and javascript. My other image is loading, but the image that I am referencing from the css file is not working and I get his from the flask terminal: GET /static/static/res/typewriter.jpg HTTP/1.1" 404
I tried typing in the path in my browser and it works fine
This is how I am referencing the image since the CSS file is already in the static directory. background-image: url("/res/typewriter.jpg");
I hope there is an easy fix for this, especially since I am new to this stuff. Thanks!
In your html file you should have this in the header:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='mainpage.css') }}">
... as long as your static directory is named static. In several of my Flask applications I am importing Bootstrap css like so:
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.css') }}">
Ensure you are visiting http://127.0.0.1:5000 in your browser (unless you changed the default).
Also here is a random example of how I serve images from the static directory:
h1 class="display-3"> <img src="/static/title_welcome.png" alt="about"></h1>
I have imported a front-end project including completed .css, .js, .html files into Django templates. They can work when run .html directly. But if run them in Django server, all links with relative path should be modified as Django style such as
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
instead of
<link rel="stylesheet" type="text/css" href="css/style.css" />.
Is there any method to keep the orginal relative path in .html file and also can run in Django?
===========================================================================
I've solve my problem, the solutions are add their path into urls.py under primary program.
if settings.DEBUG:
urlpatterns += [
url(r'^(?P<path>css.*)$', views.serve),
url(r'^(?P<path>images.*)$', views.serve),
url(r'^(?P<path>js.*)$', views.serve)]
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Closed 5 years ago.
Here is my directory hierarchy
flaskApp
|_ flaskApp.py
|_static
| |_realsurfstyle.css
|
|_templates
|_Realsurfhtml.html
Here is the relevant render_template from the flaskApp.py file
#app.route('/<surfBreak>')
def waveHeight(surfBreak):
return render_template("Realsurfhtml.html", name=surfBreak)
Here is my code from the html file
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='static/realsurfstyle.css')}}"/>
I dont see what im missing?
You don't have to place static in the file path to the .css file. In essence you're telling it that path to the file is /static/static/realsurfstyle.css so instead try and write the path as href="{{ url_for('static', filename='realsurfstyle.css')}}"
Additionally, I would recommend placing the .css files in a folder in the static directory labeled css. which would change the file path to href="{{ url_for('static', filename='css/realsurfstyle.css')}}"
I'm trying to use this template: http://www.free-css.com/free-css-templates/page185/flat-style#shout
and this is my file directory:
app
- static
[--] css (inside static)
[--] images (inside static)
[--] js (inside static)
- templates
but the images won't load properly still:
http://i.imgur.com/Mh71ko9.png
Does anyone know why the images won't properly load?
You have simply dumped the HTML from the website in to your templates folder and all the href and src attributes for images and CSS are still using relative links. These need to be converted to use Flask's static files functionality.
For example, to get the CSS working, change this line:
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
to this:
<link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel='stylesheet' type='text/css' />
And similarly for images, you can change:
<img src="images/logo.png" title="Flat style" />
to
<img src="{{ url_for('static', filename='images/logo.png') }}" title="Flat style" />
You'll need to do this for all static files referenced in the HTML.
Note that your Flask app will need to have imported url_for
from flask import Flask, render_template, url_for
I have a simple flask application. I have all my css inside static/css directory. I have created a master template in which I want to include css from that directory. Following is what I have tried so far.
<link rel="stylesheet" href="/static/css/justified-nav.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/justified-nav.css') }}" media="screen">
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/static/css/justified-nav.css" media="screen">
In all the cases the file gets loaded but with mime-type text/plain. I have tried putting the css file directly into the static folder as well but no results.
What am I doing wrong? How can I include a css file in a template?
Flask uses the mimetypes module to determine the MIME type of a file, based on its extension. If you get text/plain for a CSS file it means this module returns the wrong MIME type.
On Windows it uses data from the registry, so if the "Content Type" value in HKCR/.css is not set to the proper MIME type it can cause your problem.
Try this and it should work.
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}"/>