Django template img src not working

Question

I want to print an image by using a img src tag in a Django template file "base.html":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Foto</title>
</head>
<body>
    <h1>My helpful timestamp site</h1>
    <img src="google.png" / >
    <hr>
    <p>Made by ... </p>
</body>
</html>

In views.py I define:

def hello(request):
    return render_to_response('base.html')

But the image does not show up in the browser. If I open it as a simple html file, it shows up in the browser.

score 26 · Answer 1 · answered Mar 05 '16 at 09:54

26

In recent versions of django

<img src="{% static 'path/to/image.ext' %}"/>

answered Mar 05 '16 at 09:54

chandan

964
1
19
26

9

`{% load static %}` `` Worked for me, thanks a ton! – WEshruth Apr 03 '16 at 09:21
1

This saved my bacon! Thank you! – j_fulch Apr 16 '16 at 08:10
2

@WEshruth You should consider posting your comment as an answer. It answers the question definitively. – Anomitra Aug 22 '17 at 12:50
Please check that the path to image **inside** the static directory is correct, I spent hours before realizing this silly mistake – Kewal Shah Mar 21 '19 at 19:31
What if we have set image in preloader then? I have other images in same folder & they map correclty but except this one which i have placed as a preloader image. Please Help me! Thank you! – Vivek Vadoliya Jul 10 '21 at 08:00

score 17 · Accepted Answer · answered Sep 18 '12 at 16:55

17

That happens because Django does not know the path to this image.
Make a folder named static/, and then a folder named images/ in your project root(where your settings.py file resides).

my_project/
    my_project/ 
        settings.py
        static/
           images/
             google.png

And then change it to:

<img src="{{STATIC_URL}}images/google.png" / >

More here.

answered Sep 18 '12 at 16:55

thikonom

4,219
3
26
30

Since I have only one image, I didn't want to use static files. I saw from the https://docs.djangoproject.com/en/1.0/ref/templates/builtins/ the example: – user1680859 Sep 18 '12 at 17:20
This is just an example. The common way to go is the one that i described in my answer. – thikonom Sep 18 '12 at 17:33

score 10 · Answer 3 · answered Aug 23 '17 at 06:39

10

You have got to add load static tag in the beginning of your Django template, best luck with below code.

{% load static %} 
<img src="{% static 'path/to/image.ext' %}"/>

answered Aug 23 '17 at 06:39

WEshruth

769
3
16
32

Django template img src not working

3 Answers3

Linked