To link to static files that are saved in STATIC_ROOT
Django ships with a static
template tag. You can use this regardless if you're using RequestContext
or not.
{% load static %} <img src="{% static "images/hi.jpg" %}" alt="Hi!" />
It is also able to consume standard context variables, for example, assuming a user_stylesheet
variable is passed to the template:
{% load static %} <link rel="stylesheet" href="{% static user_stylesheet %}" type="text/css" media="screen" />
If you'd like to retrieve a static URL without displaying it, you can use a slightly different call:
{% load static %} {% static "images/hi.jpg" as myphoto %} <img src="{{ myphoto }}"></img>
The staticfiles
contrib app also ships with a static template tag
which uses staticfiles
STATICFILES_STORAGE
to build the URL of the given path (rather than simply using urllib.parse.urljoin()
with the STATIC_URL
setting and the given path). Use that instead if you have an advanced use case such as using a cloud service to serve static files:
{% load static from staticfiles %} <img src="{% static "images/hi.jpg" %}" alt="Hi!" />
You should prefer the static
template tag, but if you need more control over exactly where and how STATIC_URL
is injected into the template, you can use the get_static_prefix
template tag:
{% load static %} <img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />
There's also a second form you can use to avoid extra processing if you need the value multiple times:
{% load static %} {% get_static_prefix as STATIC_PREFIX %} <img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" /> <img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />
Similar to the get_static_prefix
, get_media_prefix
populates a template variable with the media prefix MEDIA_URL
, for example:
<script type="text/javascript" charset="utf-8"> var media_path = '{% get_media_prefix %}'; </script>
Django comes with a couple of other template-tag libraries that you have to enable explicitly in your INSTALLED_APPS
setting and enable in your template with the {% load %}
tag.