Displaying uploaded media in a web page

Question

Friends,

I am using Django 1.6 and I have for the last week(!) been trying to display photos on a web page that are uploaded via the Django Admin site.

I know this is a common problem. I have tried reading the documentation, numerous SO questions like this one and this one all without success.

After uploading the image via the Admin site, I can see that the image exists in the following folder:

/home/ian/django/mysite/cars/media/images/1.JPG

However when the page loads (or trying to view the image after uploading them via the Admin Site) I see a 404 error. The source for the image shows the following:

<li><img src="/media/images/1.JPG" height="420"/></li>

The model.py has the following field:

photo = models.ImageField(upload_to='images/')

The urls.py has the following added:

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

The template is:

{% extends "base.html" %}
<h1>Here</h1>
<p>{{ collectiondetail.title }}</p>
{% for photo in photos %}
   <li><img src="{{ photo.photo.url }}" height="420"/></li>    
{% endfor %}    
{% endblock %}

Finally the settings.py are:

STATIC_ROOT = '/home/ian/django/mysite/cars/static/'

STATIC_URL = '/static/'

MEDIA_ROOT = '/home/ian/django/mysite/cars/media/'

MEDIA_URL = '/media/'

What have I missed?

Are you sure that images are reachable? I'm talking about permissions — trinchet, Jun 16 '14 at 20:42
Having checked the permissions using the terminal, nothing jumps out, is there a better method to check? — Ian Carpenter, Jun 17 '14 at 20:18

score 1 · Answer 1 · answered Jun 16 '14 at 20:39

1

The urls.py snippet you are using is only for development and will only work in debug mode. Everything you have looks correct so double-check that in settings.py DEBUG = True. From the docs on this feature:

This helper function works only in debug mode and only if the given prefix is local (e.g. /media/) and not a URL

answered Jun 16 '14 at 20:39

JCotton

11,650
5
53
59

Thanks for the response, having checked I am using Debug mode (The settings file shows DEBUG = True and I also see the customised 404 error page" – Ian Carpenter Jun 17 '14 at 19:58
2

@trinchet has a good idea about permissions. Try manually putting a file in the MEDIA_ROOT directory, make sure it's readable and try to load it in a browser at "/media/image.jpg" (or whatever file it is). If that works, examine the permissions of the uploaded files. Take a look at these upload [settings](https://docs.djangoproject.com/en/dev/topics/http/file-uploads/#changing-upload-handler-behavior). – JCotton Jun 17 '14 at 20:22
thanks, I think you guys are on to something I manually put the file in the MEDIA_ROOT directory as you suggested and could view it through the browser. However it appears intermittently (sometimes it works but more often it returns a 404) I will do some more digging and update the question. But a big thanks for giving me something to go on. – Ian Carpenter Jun 17 '14 at 21:07

score 0 · Accepted Answer · answered Jun 22 '14 at 12:41

Thanks to everyone for helping out. The default permissions when the files were uploaded were ok.

Finally managed to track down the problem to two settings.

MEDIA_URL was previously set to:

MEDIA_URL = '/media/'

Changed this to:

MEDIA_URL = '/cars/media/'

Changed the following in the urls.py file from

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

to

if settings.DEBUG:
    urlpatterns += patterns('',
        url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
            'document_root': settings.MEDIA_ROOT,
        }),
        url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
            'document_root': settings.STATIC_ROOT,
        }),
)

And now the images show as expected.

Displaying uploaded media in a web page

2 Answers2