How to properly set images in templates with django 1.4 (django-skel setup) using the development server

Question

I am trying to serve my Django project, set up with django-skel 1.4, using the development server. My site runs as expected except for my images, they are not served.

Part of templates/home.html

<img width="65px;" src="assets/img/pic.png" alt="" id="symbol" />

I'm guessing I should change something in this part: src="assets/img/pic.png". I've looked around in SO threads and tweaked according to the given answers but I could not manage to make it work.

So how do I properly set images in templates?

Other relevant information:

settings.common.py

DJANGO_ROOT = dirname(dirname(abspath(__file__)))

MEDIA_ROOT = normpath(join(DJANGO_ROOT, 'media'))
MEDIA_URL = '/media/'

STATIC_ROOT = normpath(join(DJANGO_ROOT, 'static'))
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    normpath(join(DJANGO_ROOT, 'assets')),
)

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

Tree of project

.
├── apps
│   └── __init__.py
├── assets
│   ├── css
│   │   └── base.css
│   ├── img
│   │   └── pic.png
│   └── js
├── default.db
├── __init__.py
├── libs
│   ├── core
│   │   ├── admin.py
│   │   ├── __init__.py
│   │   ├── models.py
│   │   ├── views.py
│   │   └── views.pyc
│   └── __init__.py
├── settings
│   ├── common.py
│   ├── dev.py
│   ├── __init__.py
│   └── prod.py
├── templates
│   ├── 404.html
│   ├── 500.html
│   ├── home.html
│   └── install.html
└── urls.py

Btw: Please no solutions using if settings.DEBUG, preferably if possible without needing to adapt urls.py.

Edit

Tree of the top level directory after doing collectstatic

.
├── fabfile.py
├── gunicorn.py.ini
├── manage.py
├── Procfile
├── project_name
│   ├── apps
│   │   └── __init__.py
│   ├── assets
│   │   ├── css
│   │   │   └── base.css
│   │   ├── img
│   │   │   └── pic.png
│   │   └── js
│   ├── default.db
│   ├── __init__.py
│   ├── libs
│   │   ├── core
│   │   │   ├── admin.py
│   │   │   ├── __init__.py
│   │   │   ├── models.py
│   │   │   └── views.py
│   │   └── __init__.py
│   ├── settings
│   │   ├── common.py
│   │   ├── dev.py
│   │   ├── __init__.py
│   │   └── prod.py
│   ├── static
│   │   │   └── js
│   │   ├── css
│   │   │   └── base.css
│   │   └── img
│   │       └── pic.png
│   ├── templates
│   │   ├── 404.html
│   │   ├── 500.html
│   │   ├── home.html
│   │   └── install.html
│   └── urls.py
├── README.md
├── reqs
│   ├── common.txt
│   ├── dev.txt
│   └── prod.txt
├── requirements.txt
└── wsgi.py

Edit 2

My understanding how Django reads the path: Let src="static/img/pic.png", from my settings.common.py:

>>> DJANGO_ROOT
'/home/my_username/web/my_project/my_project'
>>> j = os.path.join(DJANGO_ROOT, 'static/')
>>> print j
/home/my_username/web/my_project/my_project/static

But

>>> STATIC_URL
'/static/'
>>> j = os.path.join(DJANGO_ROOT, STATIC_URL)
>>> print j
/static/

So somewhere Django probably does os.path.join that is the only reason I can think of why src="static/img/pic.png" works but src="{{STATIC_URL}}img/pic.png" doesn't. But why then does this apparently work for other people but not for me?

Answer 1

I think you have to add the following to urls.py

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

at least thats how I always do it...

Answer 2

You need to add

TEMPLATE_CONTEXT_PROCESSORS = (
    ...
    'django.core.context_processors.static',
)

and add staticfiles to your INSTALLED_APPS

You need to modify your img tag

<img width="65px;" src="{{STATIC_URL}}assets/img/pic.png" alt="" id="symbol" />

If it is user uploaded content then replace {{STATIC_URL}} with {{MEDIA_URL}}

Also see related Django cannot find my media files (on development server)