Invalid block tag: 'static'

Question:

Server returned
TemplateSyntaxError at /
Invalid block tag: 'static'
on this line: <img src="{% static 'icon/logo.png' %}">.

The whold html file is like this (it’s an html file {% include %}ed by another one):

{% load staticfiles %}
<div class="header">
    <nav>
      <ul class="nav nav-pills pull-right">
        <li role="presentation"><a href="{% url 'offer rank' %}">潮品榜</a></li>
        <li role="presentation"><a href="{% url 'user rank' %}">达人榜</a></li>
        <li role="presentation"><a href="#" data-toggle="modal" data-target="#start">登陆</a></li>
        <li role="presentation"><a href="#" data-toggle="modal" data-target="#start">注册</a></li>
        {% if debug_users %}
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">切换用户<span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            {% for debug_user in debug_users %}
            <li><a href="{% url 'debug login' debug_user.id %}">{% if debug_user.kbjuser.user_type == '1' %}达人{% else %}商家{% endif %}: {{ debug_user.username }}</a></li>
            {% endfor %}
          </ul>
        </li>
        {% endif %}
      </ul>
    </nav>
     <h3><img src="{% static 'icon/logo.png' %}">
        <a href="{% url 'home' %}" class="text-muted">口碑街</a>
    </h3>
</div>

And settings.py is like this:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.7/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static/")

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media/")


from hw.settings import *
from useraccess.settings import *

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # other finders..
    'compressor.finders.CompressorFinder',
)

COMPRESS_ENABLED = True

I can’t figure out what happens here.

Here are some more lines in settings.py:

# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mptt',
    'hw',
    'useraccess',
    'proxy',
    'compressor',
    'sekizai',
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'useraccess.middleware.VisitCollectMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

)

TEMPLATE_CONTEXT_PROCESSORS = (
    'django.contrib.auth.context_processors.auth',
    'django.core.context_processors.i18n',
    'django.core.context_processors.request',
    'django.core.context_processors.media',
    'django.core.context_processors.static',
    'hw.context_processors.user_info',
    'hw.context_processors.login_form',
    'hw.context_processors.get_all_user',
    'sekizai.context_processors.sekizai',
)

ROOT_URLCONF = 'ddw.urls'

WSGI_APPLICATION = 'ddw.wsgi.application'

LOGIN_URL = '/login/'

My project folder.

Asked By: Yan Yang

||
Source

Answers:

Make sure that ‘django.contrib.staticfiles’ is included in your
INSTALLED_APPS.

Answered By: doniyor

It’s OK now. I resolved it myself.
I’m sorry. I confused two similar html files. The one I put on here (header.html) was right but header_authenticated.html was wrong.

Answered By: Yan Yang

This worked for me

{% load staticfiles %}
Answered By: Alexandre Simões

{% load static %}
or
{% load staticfiles %}

both will work.
Just be sure you use equal amount of spaces between opening and closing of ‘{‘ and ‘%’.

Answered By: Krutik Shah

add {% load static %} at the top of html file, under the DOCTYPE html line

Answered By: Александр Коньшин

include 

{% load static %}

just above tag in your html file, it will make HTML file to load static files like css, js, images etc

Answered By: cryptoKTM

include {% load static %} in your html file.

That’s what worked for me

Answered By: Wendo Nyang

07 Sept, 2020
i also faced the same problem on Django 3.2.2
and this worked for me.

{% load static %}
Answered By: Saiful Islam

Hint: be sure that you use {% load static %} in all templates your using to extend static files. Extending a base.html file doesn’t carry over {% load static %} for you.

Answered By: Marcus

For a folder structure like this

myproject/
    manage.py
    myapp/
        __init__.py
        models.py
        views.py
        static/
            style.css
        templates/
            base.html
            index.html

In your settings.py, make sure you have

# Application definition

INSTALLED_APPS = [
    ...
    'django.contrib.staticfiles',
    ...
]

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/

STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

In your base.html template, make sure to have {% load static %} tag, like

<html>
  <head>
    <title>{% block title %}Add App Title here{% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'style.css' %}">
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

Then, you’ll want to run python manage.py collectstatic which will generate a staticfiles/ folder in the root of myproject/ (where manage.py is). That’s it!

If you use Docker, then make sure to include in your Dockerfile the following step

RUN python manage.py collectstatic --noinput

If you will to know more about to serve static files in production, consider this answer.

Answered By: Tiago Martins Peres