Loading images in a static file

Question

So I have completed the Django tutorial, play around with it some, and feel that I have a good understanding of Django. The only problem I am facing is that when I try to display a static page for a landing page, I cannot seem to get any images to load.

First off I have tried two different methods of displaying a static landing page. First:

# main app urls.py
    from django.conf.urls import patterns, include, url

    from django.contrib import admin
    admin.autodiscover()

    urlpatterns = patterns('',
        url(r'^$', TemplateView.as_view(template_name="landing/index.html")),
        url(r'^polls/', include('polls.urls', namespace="polls")),
        url(r'^admin/', include(admin.site.urls)),
    )

This is the main app's urls.py and I use the TemplateView to display the static index.html which is located at 'my_app/templates/landing/index.html'.

This is all and well until I try to add a static image into the index.html file. No matter where I put the image file I cannot seem to get it to display. In the index.html template I have tried different methods of using static as well as trying different direct paths without the need for the embedded python code. How am I supposed to display images and where should they be located?

The second method I found that worked for just displaying the static page (not the image) was to create a new app called landing and have that simply display a static page from the urls.py in the same manner(using TemplateView). Is this method better? I still had the same problems in displaying an image within the static page as the first method, which makes me think it has something to do with the TemplateView.

Am I doing this completely wrong? What are my options? I am using Django 1.5.1.

Thanks in advance!

you can put the code the html image and the configuration the static in settings.py? — Gianfranco Lemmo, May 15 '13 at 00:25
are you create a folder static?? and the settings.py are you create the variable static??? — Gianfranco Lemmo, May 15 '13 at 00:35

score 3 · Accepted Answer · answered May 15 '13 at 00:36

It is a bit awkward to serve statics files with Django. This is because they have the conception that static files such as images must be in another domain or server for performance/security reasons.

To serve static content with django do this:

# urls.py
# add this lines at the end

from django.conf.urls.static import static
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Then in settings.py define the directory where the images/css/js and similar static contents are:

# settings.py

import os
settings_dir = os.path.dirname(__file__)
PROJECT_ROOT = os.path.abspath(os.path.dirname(settings_dir))

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    # this assumes your static contents is in <your_project>/static/
    os.path.join(PROJECT_ROOT, 'static/'),
    )

MEDIA_ROOT = os.path.join(PROJECT_ROOT, 'media/')
MEDIA_URL = '/media/'

Note: You may also consider images as media and place them in your media/ folder.

That should get static files served with your app. Just reference them like this href="/static/xxxx.jpg" or href="/media/xxxx.jpg".

Hope it helps!

That won't work static in the href unless you use {% load staticfiles %} — Gianfranco Lemmo, May 15 '13 at 00:42
I've got working static content many times and I have never used `{% load staticfiles %}`. I don't know Django1.5 but with 1.4 I haven't needed it, maybe is just me. — Paulo Bu, May 15 '13 at 00:44
The problem use directly media or static you suppose always is the same folder but the media path is for example MEDIA_URL = '/notice/' you sentences dont work, because you should invoke these way the variable global {{ STATIC_URL }} or {{ MEDIA_URL }} or how tell you before with {% load staticfiles %}. This form you have a variable dinamic and you can change when do you want — Gianfranco Lemmo, May 15 '13 at 00:59
You're right. That way hardwires the code in your template, though it will work. I'll give a try to `{% load staticfiles %}`. Thanks for the heads up :) — Paulo Bu, May 15 '13 at 01:18

score 0 · Answer 2 · answered May 15 '13 at 09:14

0

This blog explains serving static file and might help:

http://agiliq.com/blog/2013/03/serving-static-files-in-django/

answered May 15 '13 at 09:14

Akshar Raaj

14,231
7
51
45

Loading images in a static file

2 Answers2

Linked