StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow to properly set images in templates with django 1.4 (django-skel setup) using the development server
text
Body
copied!<p>I am trying to serve my Django project, set up with <a href="http://django-skel.readthedocs.org/en/latest/layout/" rel="nofollow">django-skel 1.4</a>, using the development server. My site runs as expected except for my images, they are not served.</p> <p><strong>Part of <code>templates/home.html</code></strong></p> <pre><code><img width="65px;" src="assets/img/pic.png" alt="" id="symbol" /> </code></pre> <p>I'm guessing I should change something in this part: <code>src="assets/img/pic.png"</code>. I've looked around in SO threads and tweaked according to the given answers but I could not manage to make it work. </p> <p>So how do I properly set images in templates?</p> <p>Other relevant information:</p> <p><strong><code>settings.common.py</code></strong></p> <pre><code>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', ) </code></pre> <p><strong>Tree of project</strong></p> <pre><code>. ├── 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 </code></pre> <p>Btw: Please no solutions using <code>if settings.DEBUG</code>, preferably if possible without needing to adapt <code>urls.py</code>.</p> <h2>Edit</h2> <p><strong>Tree of the top level directory after doing <code>collectstatic</code></strong></p> <pre><code>. ├── 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 </code></pre> <h2>Edit 2</h2> <p>My understanding how Django reads the path: Let <code>src="static/img/pic.png"</code>, from my <code>settings.common.py</code>:</p> <pre><code>>>> 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 </code></pre> <p>But</p> <pre><code>>>> STATIC_URL '/static/' >>> j = os.path.join(DJANGO_ROOT, STATIC_URL) >>> print j /static/ </code></pre> <p>So somewhere Django probably does <code>os.path.join</code> that is the only reason I can think of why <code>src="static/img/pic.png"</code> works but <code>src="{{STATIC_URL}}img/pic.png"</code> doesn't. But why then does this apparently work for other people but not for me? </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload