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?

Solution 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

Solution 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

Solution 3

Check in your settings.py you have define MEDIA_ROOT and 'MEDIA_URL' (and they are correct). The MEDIA_ROOT specifies an absolute folder on your machine where media will be stored.

So for an example:

MEDIA_ROOT = '/myfolder/'

This would mean it would look for image at:

/myfolder/images/albums/

Next in your settings.py check your MEDIA_ROOT location: i.e.

MEDIA_URL = 'http://localhost/myfolder/'

So your images:

<img src="{{ MEDIA_URL }}{{ image.image.url }}" height="420"></a>

This would relate to:

http://localhost/myfolder/images/albums/

Hope this helps.

Solution 4

Source: https://docs.djangoproject.com/en/dev/howto/static-files/#serving-files-uploaded-by-a-user

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

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

you need to add to url pattern to serve uploaded files

Solution 5

Within your details.html, change your

img src="{{ image.image.url }}" height="420"

To

img src="your_app/media/{{ image.image.url }}" height="420"

I hope this helps. If not I will be glad to provide more details.

View more solutions

Comments

[sheshkovsky]

image url changes to : localhost:8000/media/http://localhost:8000/media/images/albu‌​ms/… when I change MEDIA_URL and add it to src. But it was fine when MEDIA_URL = ''. So it didn't solve the problem.

[Glyn Jackson]

MEDIA_URL needs to be a URL that leads to that same directory path. {{ MEDIA_URL }} is unnecessary when using the url attribute, since it automatically appends MEDIA_URL but you do need to set a {{ MEDIA_URL }} or your image won't show!

[bruno desthuilliers]

@Sheshkovsky : Do yourself a favor and go read theses links.

[Aswin Murugesh]

I get an error as staticfiles_urlpatterns not defined. Any Idea?

[Paulo Bu]

@AswinMurugesh: Add this line in your urls.py: from django.contrib.staticfiles.urls import staticfiles_urlpatterns

[Eduard Gamonal]

I don't think hardcoding the static url good idea. why not loading the static template tag {% load static %} or using {{ STATIC_URL }}?

[Ansel Zandegran]

I'm getting 'name 'static' is not defined'

[Afshar Mohebi]

@AnselZandegran Add this: from django.contrib.staticfiles.urls import static