How do I display an image on my webpage in Django?

Question

I want to display an image on my website. I've been looking through the Django documentation and the other posts on stackoverflow, but I haven't gotten this to work.
I have an image name 'under-construction.jpg'. It lives in the /home/di/mysite/myapp/static/images directory.

I have a template like this:

<img src="{{ STATIC_URL }}images/under_construction.jpg" alt="Hi!" />

in my views.py I have this:

def under_construction(request):
    return render(request, 'under_construction.html')

In my settings.py, I have this:

STATIC_ROOT = ''

# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'

# Additional locations of static files
STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    '/home/di/mysite/myapp/static',
    '/home/di/mysite/myapp/static/images',
)

I executed ./manage.py collectstatic and it put a lot of files in /home/di/mysite/admin and /home/di/mysite/images. What do I have to do get my image to show up?

possible duplicate of http://stackoverflow.com/questions/1179453/django-and-serving-static-files — Vivek S, Jun 12 '12 at 04:12
possible duplicate of http://stackoverflow.com/questions/10792256/show-picture-in-django/10792318#10792318 — lciamp, Jun 12 '12 at 06:51

score 2 · Accepted Answer · edited Feb 17 '13 at 00:03

All you need to do is edit settings.py to be as the 4 following points and create a new folder (static) in the same folder settings.py is located in the folder static you can create another folder (images) in it you can put the (under_constructioon.jpg)

STATICFILES_DIRS = (os.path.join( os.path.dirname( __file__ ), 'static' ),)
STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder',)
STATIC_URL = '/static/'
STATIC_ROOT = ''

after you're done with the prev. points you can write
<img src="{{ STATIC_URL }}images/under_construction.jpg" alt="Hi!" />

score 2 · Answer 2 · answered Jun 12 '13 at 12:16

I have faced same problem displaying the static image. suffered a lot and spent a lot lot of time in this regard. So thought to share my settings.

settings.py

STATIC_ROOT = ''  
STATIC_URL = '/static/'      
ADMIN_MEDIA_PREFIX = '/static/admin/'          

import os.path  

STATICFILES_DIRS = (      
    "D:/temp/workspace/offeronline/media",
    (os.path.join( os.path.dirname( __file__ ), 'static' )),  
)

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',  
)

urls.py

from django.contrib.staticfiles.urls import staticfiles_urlpatterns
    # ... the rest of your URLconf here ...  and at the end of the file add the following line
urlpatterns += staticfiles_urlpatterns()

and finally added the following code to the template tag and it worked

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

Html: views.py: return render(request,'contribute.html',{'status':'Message Sended ('+str(ctime())+')','STATIC_URL':'/static/'}) Worked for me thanks — Fahri Güreşçi, May 14 '18 at 22:53

score 0 · Answer 3 · answered Jun 12 '12 at 04:10

I have solved that problem like this.

STATIC_ROOT = '/path/to/project/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
)

Django will not directly get files directly even you do this. You need to link this static directory for each application of yours. Just go to the django app dir run following command..

cd /path/to/project/my_proj/my_app
ln -s /path/to/project/static/

This will work only in debug mod. You need to set DEBUG = true in settings.py file. This should work with django's development server.

Django won't serve any static file in production mod. You need to serve static files with web-server in production mod.

More information can be found here..

score 0 · Answer 4 · answered Jun 12 '12 at 04:11

Django does support static files during development, You can use the django.views.static.serve() method in view to serve media files.

But using this method is inefficient and insecure for production setting.

for Production setting in Apache

https://docs.djangoproject.com/en/1.2/howto/deployment/modpython/#serving-media-files

Samy Vilar · Answer 5 · 2012-06-12T04:59:13.920

set STATIC_ROOT = /path/to/copy/files/to

have you added

urlpatterns += patterns('django.contrib.staticfiles.views', url(r'^static/(?P<path>.*)$', 'serve'),

or you can also do this

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

# ... the rest of your URLconf here ...

urlpatterns += staticfiles_urlpatterns()

and of course try not to server static files through django it does have some overhead instead configure your http server to serve them, assuming you have an http server (nginx is quite good).

How do I display an image on my webpage in Django?

5 Answers5