Adding an image into a django template from the static folder - Django

Question

I have a Django template and I want to add a static image to the file from my static folder that I have within the application. I am trying to but nothing is appearing on the template.

Does anyone know where my error is coming from?

Here is my code:

{% extends "base.html" %}

{% block content %}
<div class="row">
  <div class="col">
    <img src="static/images/Artboard1.png" alt="">
    <h2>{{ currentUser.username }}</h2>
  </div>

  <a href="{% url 'logout' %}">Logout</a>
{% endblock %}

Here is an image of my directory:

For a start, you need an absolute path: /static/images/Artboard1.png. Also how have you configured static files? Is this is dev or production? — Daniel Roseman
– Daniel Roseman, Commented Oct 6, 2017 at 9:41

Sandeep Balagopal · Accepted Answer · 2017-10-06 10:11:11Z

8

load staticfiles tag to template after extends

{% extends "base.html" %}
{% load staticfiles %}

and then use it in src attribute of img HTML tag

<img src="{% static 'images/Artboard1.png'%}" alt="">

edited Oct 6, 2017 at 10:11

Sandeep Balagopal

2,00320 silver badges28 bronze badges

answered Oct 6, 2017 at 10:04

Satendra

6,8554 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Satendra Over a year ago

@Sandeep it will work with {%load static %} as well.

NIKHIL RANE · Accepted Answer · 2017-10-06 11:02:10Z

7

Configure the following setting in your setting.py

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

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

And use in your template

<img src="{% static 'images/Artboard1.png'%}" alt="">

Hope this is help you

answered Oct 6, 2017 at 11:02

NIKHIL RANE

4,1222 gold badges26 silver badges49 bronze badges

1 Comment

Omar Jandali Over a year ago

I implimented the code that you have and got this message Invalid block tag on line 6: 'static', expected 'endblock'. Did you forget to register or load this tag? @nikhilrane

Bartosz · Accepted Answer · 2020-12-17 17:42:54Z

0

I had the same problem. I sorted it out by adding {% load static %} to every subpage.

like here:

{% extends "base.html" %}
{% load static %}

{% block title %}
{{ title }}
{% endblock title %}

{% block hero %}
<picture class="hero__background">
    <img src="{% static 'top_banner.jpg' %}" alt="" srcset="">    
</picture>
{% endblock hero %}

answered Dec 17, 2020 at 17:42

Bartosz

614 bronze badges

Collectives™ on Stack Overflow

Adding an image into a django template from the static folder - Django

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related