image - Django template img src not working

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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">
    <title>Foto</title>
</head>
    <h1>My helpful timestamp site</h1>
    <img src="google.png" / >
    <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.
                {% load static %} <img src="{% static 'path/to/image.ext' %}"/> Worked for me, thanks a ton!
– WEshruth
                Apr 3, 2016 at 9:21
                @WEshruth You should consider posting your comment as an answer. It answers the question definitively.
– Anomitra
                Aug 22, 2017 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, 2019 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, 2021 at 8:00
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.
                Since I have only one image, I didn't want to use static files. I saw from the docs.djangoproject.com/en/1.0/ref/templates/builtins the example: <img src="bar.gif" height="10" width="{% widthratio this_value max_value 100 %}" />
– user1680859
                Sep 18, 2012 at 17:20
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' %}"/>
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.