How do I include image files in Django templates?

Your

<img src="/home/tony/london.jpg" />

will work for a HTML file read from disk, as it will assume the URL is file:///home/.... For a file served from a webserver though, the URL will become something like: http://www.yourdomain.com/home/tony/london.jpg, which can be an invalid URL and not what you really mean.

For about how to serve and where to place your static files, check out this document. Basicly, if you’re using django’s development server, you want to show him the place where your media files live, then make your urls.py serve those files (for example, by using some /static/ url prefix).

Will require you to put something like this in your urls.py:

(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',
    {'document_root': '/path/to/media'}),

In production environment you want to skip this and make your http server (apache, lighttpd, etc) serve static files.

Try this,

settings.py

# typically, os.path.join(os.path.dirname(__file__), 'media')
MEDIA_ROOT = '<your_path>/media'
MEDIA_URL = '/media/'

urls.py

urlpatterns = patterns('',
               (r'^media/(?P<path>.*)$', 'django.views.static.serve',
                 {'document_root': settings.MEDIA_ROOT}),
              )

.html

<img src="{{ MEDIA_URL }}<sub-dir-under-media-if-any>/<image-name.ext>" />

Caveat

Beware! using Context() will yield you an empty value for {{MEDIA_URL}}. You must use RequestContext(), instead.

I hope, this will help.

I have spent two solid days working on this so I just thought I’d share my solution as well. As of 26/11/10 the current branch is 1.2.X so that means you’ll have to have the following in you settings.py:

MEDIA_ROOT = "<path_to_files>" (i.e. /home/project/django/app/templates/static)
MEDIA_URL = "http://localhost:8000/static/"

*(remember that MEDIA_ROOT is where the files are and MEDIA_URL is a constant that you use in your templates.)*

Then in you url.py place the following:

import settings

# stuff

(r'^static/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}),

Then in your html you can use:

<img src="{{ MEDIA_URL }}foo.jpg">

The way django works (as far as I can figure is:

1. In the html file it replaces MEDIA_URL with the MEDIA_URL path found in setting.py
2. It looks in url.py to find any matches for the MEDIA_URL and then if it finds a match (like r’^static/(?P.)$’* relates to http://localhost:8000/static/) it searches for the file in the MEDIA_ROOT and then loads it

Another way to do it:

MEDIA_ROOT = '/home/USER/Projects/REPO/src/PROJECT/APP/static/media/'
MEDIA_URL = '/static/media/'

This would require you to move your media folder to a sub directory of a static folder.

Then in your template you can use:

<img class="scale-with-grid" src="{{object.photo.url}}"/>

I do understand, that your question was about files stored in MEDIA_ROOT, but sometimes it can be possible to store content in static, when you are not planning to create content of that type anymore.
May be this is a rare case, but anyway – if you have a huge amount of "pictures of the day" for your site – and all these files are on your hard drive?

In that case I see no contra to store such a content in STATIC.
And all becomes really simple:

static

To link to static files that are saved in STATIC_ROOT Django
ships with a static template tag. You can use this regardless if
you’re using RequestContext or not.

{% load static %} <img src="{% static "images/hi.jpg" %}" alt="Hi!" />

copied from Official django 1.4 documentation / Built-in template tags and filters

I tried various method it didn’t work.But this worked.Hope it will work for you as well. The file/directory must be at this locations:

projec/your_app/templates
project/your_app/static

settings.py

import os    
PROJECT_DIR = os.path.realpath(os.path.dirname(_____file_____))
STATIC_ROOT = '/your_path/static/'

example:

STATIC_ROOT = '/home/project_name/your_app/static/'    
STATIC_URL = '/static/'    
STATICFILES_DIRS =(     
PROJECT_DIR+'/static',    
##//don.t forget comma    
)
TEMPLATE_DIRS = (    
 PROJECT_DIR+'/templates/',    
)

proj/app/templates/filename.html

inside body

{% load staticfiles %}

//for image

img src="{% static "fb.png" %}" alt="image here"

//note that fb.png is at /home/project/app/static/fb.png

If fb.png was inside /home/project/app/static/image/fb.png then

img src="{% static "images/fb.png" %}" alt="image here" 

If your file is a model field within a model, you can also use “.url” in your template tag to get the image.

For example.

If this is your model:

class Foo(models.Model):
    foo = models.TextField()
    bar = models.FileField(upload_to="foo-pictures", blank = True)  

Pass the model in context in your views.

return render (request, "whatever.html", {'foo':Foo.objects.get(pk = 1)})

In your template you could have:

<img src = "{{foo.bar.url}}">

/media directory under project root

Settings.py

BASE_DIR = os.path.dirname(os.path.dirname(__file__))
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

urls.py

    urlpatterns += patterns('django.views.static',(r'^media/(?P<path>.*)','serve',{'document_root':settings.MEDIA_ROOT}), )

template

<img src="{{MEDIA_URL}}/image.png" > 

In development
In your app folder create folder name ‘static’ and save your picture in that folder.

To use picture use:

<html>
    <head>
       {% load staticfiles %} <!-- Prepare django to load static files -->
    </head>
    <body>
        <img src={% static "image.jpg" %}>
    </body>
</html>

In production:
Everything same like in development, just add couple more parameters for Django:

1. add in settings.py
   STATIC_ROOT = os.path.join(BASE_DIR, "static/")(this will prepare folder where static files from all apps will be stored)

2. be sure your app is in INSTALLED_APPS = ['myapp',]

3. in terminall run command python manage.py collectstatic (this will make copy of static files from all apps included in INSTALLED_APPS to global static folder – STATIC_ROOT folder )

   Thats all what Django need, after this you need to make some web server side setup to make premissions for use static folder. E.g. in apache2 in configuration file httpd.conf (for windows) or sites-enabled/000-default.conf. (under site virtual host part for linux) add:

   Alias static “path_to_your_projectstatic”

   Require all granted

   And that’s all

If you give the address of online image in your django project it will work.
that is working for me. You should take a shot.

Also check that the problem may not be due to path, but file name or extension. While failing to dislay an image added to base.html template, the error was found related to image file extension. If you are storing the image in jpeg format, use .jpg as the extension in the img tag
<img src="{% static 'logo.jpg' %}" alt="Logo">.

I’ve had the hardest time figuring this out so I am making this post to explain as clearly as i can, what worked for me, to help someone else.

Let’s say you have a project called project_name. and an app called app_name. your root directory should look like this:

/app_name
/project_name
manage.py

DEVELOPMENT.

while in development mode, your CSS and JS files should be inside ./app_name/static/app_name/..

however your images should be inside ./app_name/static/media/..

now add these to settings.py :

If this not already there, add

    STATIC_URL = '/static/' 

This tells Django where to find all the static files.

    MEDIA_URL = '/media/'

This points Django to the folder where your images are, after it loads static. In this case it is /media/ because our images are in /static/media.

next, you should put this in the individual template where you need the image (I thought putting a single {% load static %} in the general layout.html template would suffice, it didn’t):

    {% load static %}

    <img src="{% static image_name %}>

depending on how you set up your project, image_name could be the exact name of the image file like "image.jpg", a variable for an image field like user.image etc

lastly, go into the project_name urls.py (same folder as settings.py) and add this line to the end:

    from django.conf import settings
    from django.conf.urls.static import static


    if settings.DEBUG:
        urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

basically telling Django to use a work around so you can see use the images in development.

That is all. your project will now display images while you are writing and testing your code(development)

PRODUCTION.

When you want to deploy your project, there are some extra steps you need to take.

Because Django does not serve images as static files during production, you have to install a Middleware called Whitenoise.

http://whitenoise.evans.io/en/stable/#installation

    pip install whitenoise

Then add the following to settings.py:

look for MIDDLEWARE and add just under django.middleware.security.SecrutiyMiddleware:

    'whitenoise.middleware.WhiteNoiseMiddleware',

Next we have to define our paths, this is because in production Django will basically collect all the static files from all our apps and rearrange them in a single folder.

Add the following to settings.py:

    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

This tells Django where to put static files when it collects them. In this case we are telling Django to put the files in the root folder. so after collectstatic runs our app would look like

/app_name
/project_name
/static
manage.py

Then add:

 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

This tells django where to put files that a user who on our site uploads..

Next,we want to go up and change Debug to False.

    Debug = False

Debug mode is used for testing in development, and in production you don’t want your app displaying error codes and the names of files and lines where something went wrong. potential security threat. Once you turn debug mode to false, Django changes how it serves the static files. so ordinarily, if you were to run your app now, you won’t see the images..

with these done, now you are ready for production. to test that everything is okay, you can run:

    python manage.py collectstatic

(type yes if prompted)
Django will collect all the static files and arrange them as necessary. if you run your project now, with debug still turned off you should see your images. you can even now delete the individual static folders in app_name or any other apps you have, if you want because Django will not use them in production. Once debug is off, Django only uses static from the collected static folder.
You can now deploy your project

Just give a try copying static folder from base path to public_html folder.

    cp -r static/ ~/public_html/