CODEWITHSUNDEEP
pythonhtmldjangoimage
Jérôme G
Jérôme G

Reputation: 1126

Django - Display an image with static files

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

Upvotes: 4

Views: 17203

Answers (2)

Micah Matthews
Micah Matthews

Reputation: 19

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%}"

Upvotes: 0

Ankush Raghuvanshi
Ankush Raghuvanshi

Reputation: 1442

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.

Upvotes: 9

Related Questions