Django can't show images on page

Question

I'm desperatly trying to load some images to and from my database with the help of Django. Loading seems to work, but getting them back from the database and showing them on a webpage doesn't seem to work.

Here some info:

Environment:

myproject |_forpix(my app) |_myproject |_media |_images |_mimicry3.png

I have a base.html wich includes a contentblock "allimages.html":

{% extends "base.html" %}
{% block content %}
<div id="imagelist">
    {% for image in images %}
    <p><img src="{{MEDIA_ROOT}}{{image.picture.url}}" />{{ image }}</p>
    {% endfor %}
</div>

{% endblock %}

This gives me the following result:

And if I click on one of the images i get:

In my settings.py I've set the following:

STATIC_URL = '/static/'

MEDIA_URL = '/media/'

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

TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'templates/'),)

Now i really don't know how to fix this. Can anybody provide me with some help (not the django tutorial, I've been there, tried that)

Do I have to add something in the urls.py especially for the media file? Or is it something else?

If i need to provide extra info, just ask.

Answer 1

^media/$ is a very wrong regex for media files. You should delete the $ (end-of-the-string) sign from this regex.

Usually for development environments I use this snippet in the urls.py:

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

urlpatterns = patterns('',
    ...
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Also remove the useless {{ MEDIA_ROOT }} part from your template code. It should be:

<img src="{{ image.picture.url }}" />