Images from ImageField in Django don't load in template

Question

I'm building a gallery using Django(1.5.1) on my local machine. In my Album model I have a ImageField. There is a view to show all images of an album. It works well, but at the end images don't show up. There's border of images as you can see but images don't load.

screenshot

models.py

class Category(models.Model):
 ###  
class Album(models.Model):   
    category = models.ForeignKey(Category, related_name='albums')
 ###
class Image(models.Model):
    album = models.ForeignKey(Album)
    image = models.ImageField(upload_to = 'images/albums/')

views.py

def detail(request, album_id):
    album = get_object_or_404(Album, pk=album_id)
    return render(request, 'gallery/detail.html', {'album': album})

detail.html

<h1>{{ album.title }}</h1>
{% for image in album.image_set.all %}
  <a>  <img src="{{ image.image.url }}" height="420"></a>
{% endfor %}

If this is my album address: http://localhost:8000/gallery/1/

Then image URL is:http://localhost:8000/media/images/albums/photo_4.JPG (I get 404 when enter it in browser)

This media root and url:

MEDIA_ROOT = '/media/'    
MEDIA_URL = '/localhost:8000/media/'  

My media root has 777 permission.

What should I do now? Where is the problem?

Answer 1

I have a clue on what's the problem. MEDIA_URL should be like this:

MEDIA_ROOT='<the full path to your media folder>' (i.e: '/home/ike/project/media/')
MEDIA_URL='/media/'

Note the slash character at the beginning. That is because media is a folder in your root server folder and not relative to whatever other url you call it.

And add these lines to the end of your urls.py file:

# You might need to import static function like this:
#from django.contrib.staticfiles.urls import static

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

You can check the following documentation: https://docs.djangoproject.com/en/dev/howto/static-files

Hope this helps

Answer 2

If you're using the dev server then you need to add something to your urls.py to make django serve the media files, cf:

1.4.x : https://docs.djangoproject.com/en/1.4/howto/static-files/#serving-other-directories 1.5.x: https://docs.djangoproject.com/en/dev/howto/static-files/#serving-files-uploaded-by-a-user