Django - Display an image with static files

Question

I have some issues with "static files" in my project I'd like to simply load an image. Here is my code :

views.py

from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader

# Create your views here.

def D3(request):
        template = loader.get_template('appli1/D3.html')
        context = {}
        return HttpResponse(template.render(context, request))

urls.py

from django.conf.urls import url
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 
from . import views
 
urlpatterns = [
    url(r'^D3$', views.D3, name='D3'),
]

D3.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    {% load staticfiles %}
    <img src="{% static "appli1/testimg.png" %}" alt="My image"/>
</body>
</html>

settings.py

STATIC_URL = '/static/'

The image testimg.png is in appli1/static/appli1/

And the file D3.html is in appli1/templates/appli1/

Thanks for your help !

EDIT : The structure of my project seems good to me, maybe I'm wrong. Here is what it looks like :

test_django/
    manage.py
    db.sqlite3
    test_django/
        __init__.py
        settings.py
        urls.py
        wsgi.py
        __pycache__/
            ...
    appli1/
        __init__.py
        admin.py
        apps.py
        models.py
        tests.py
        urls.py
        views.py
        __pycache__/
            ...
        migrations/
            ...
        static/
            appli1/
                testimg.png
        templates/
            appli1/
                D3.html

Try following the answer I provided here: stackoverflow.com/questions/29957604/… — jape
– jape, Commented Jul 20, 2016 at 13:51
You put {% load staticfiles %} on top of your html? Use this instead: <img src="{% static 'appli1/testimg.png' %}" alt="My image"/>. Is the image file spelled correctly (case sensitive)? — jape
– jape, Commented Jul 20, 2016 at 13:59
I put {% load staticfiles %} on top of the html file (above !DOCTYPE) And I checked, the image is correctly spelled. — Jérôme G
– Jérôme G, Commented Jul 20, 2016 at 14:08

Ankush Raghuvanshi · Accepted Answer · 2016-07-20 14:40:31Z

9

There are following issue with your code:

1) Check quotes in

<img src="{% static "appli1/testimg.png" %}" alt="My image"/>

Technically,in the above "{% static " will be read as one value, then " %}" as other, and finally "My image" as another.

Following is the correct way of doing it:

<img src="{% static 'appli1/testimg.png' %}" alt="My image"/>

This way html read it "{% static 'appli1/testimg.png' %}" as a whole inside which lies 'appli1/testimg.png'.

2) As I don't know your directory structure and hence your root directory, this might be another issue.

If in your 'appli1/static/appli1' your 'static' is at the same level as that of root directory, then it will work fine, which I think is the case as even your templates are in 'appli1/templates/appli1/' and your templates are being loaded. Hence proving that 'static' is at the root level.

Else, if its not the case, and even your templates are not loaded (Coz i'm just assuming your templates are being loaded), then your root 'static' and 'templates' folder are not the same level of root directory and hence the html and static files are not being discovered by the url you are specifying in your html.

answered Jul 20, 2016 at 14:40

Ankush Raghuvanshi

1,44212 silver badges18 bronze badges

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

6 Comments

Ankush Raghuvanshi Over a year ago

Did you check the root directory?

Jérôme G Over a year ago

Thanks for your answer. Unfortunatly I already tried with these quotes ' ' but it doesn't work. I edited my first post to show the structure of my project. What do you mean by "check the root directory" ?

Ankush Raghuvanshi Over a year ago

I just saw the edited post, your directory structure. And the issue is with the root directory as i mentioned in my answer. Let me explain you.

Ankush Raghuvanshi Over a year ago

So basically, in your settings.py, you define the root directory using the BASE_DIR which tells django that if no path is specified, then look in this directory. So by default, your BASE_DIR is where your manage.py lies. So when you specify the STATIC_URL = '/static/' , it will look for a folder at the same level as that of manage.py, which in your case, it will never find as your static folder lies inside 'test_django/appli1'. So you always keep the static and templates folder outside your apps folder i.e., at hte same level as that of manage.py which is the BASE_DIR level. Try it.

Ankush Raghuvanshi Over a year ago

Also I have a small question that was your D3.html getting rendered when your def D3 in views was rendering it.? Coz what I feel is that you would have faced the same directory issue there also as in the settings.py we also specifiy the directory for templates under the TEMPLATES block. And its a good practice to keep the templates also at the BASE_DIR level by writing this under the TEMPLATES block -> 'DIRS': [os.path.join(BASE_DIR, 'templates')],

|

Micah Matthews · Accepted Answer · 2021-07-20 01:07:38Z

0

One of the issues you might be having is that your STATIC_DIR setting in your project's settings.py file might not be configured. The Django docs have a section on that which is really easy to follow along. After you do that, when you have the {% load static %} tag, when you insert a {% static 'path/to/file.txt' %} tag, Django will look in your projects main static file and then find the app folder and then follow the path you lay out from there. for example, if your file is in an app called 'main' in static/main/images/fart.png, then all you have to do is put scr="{% static static/main/images/fart.png%}"

answered Jul 20, 2021 at 1:07

Micah Matthews

193 bronze badges

Collectives™ on Stack Overflow

Django - Display an image with static files

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related