Django show ImageField

Question

I have extended the base User from Django with the OneToOne method.

class Employee(models.Model):
    user = models.OneToOneField(User, on_delete = models.CASCADE)
    floor = models.CharField(max_length = 100)
    avatar = models.ImageField(upload_to='userimages')

The image is uploaded to media/userimages.

Now, when I try to show the avatar, I am trying this way, but it doesn't show anything.

<img src="media/{{ user.employee.avatar.url }}" alt="">

If I just output user.employee.avatar.url, I get:

'media/userimages/name.jpg'

The image exists in that folder, but it doesn't appear on the website.

I really can't figure out why it doesn't work. Any help is appreciated.

What is the output you see when you view the source in the browser? Does browsing to http://127.0.0.1:8000/app/static/userimages/name.jpg show you the correct image? — Adam Barnes, Feb 28 '18 at 17:26
@AdamBarnes it does not show because it's not configured in the urls.py — Adrian, Feb 28 '18 at 17:34
@YannicHamann when I tried that way I get a TemplateSyntaxError Could not parse the remainder: — Adrian, Feb 28 '18 at 17:34
When using the `{% static %}` templatetag, you need to `{% load static %}` first. — Adam Barnes, Feb 28 '18 at 17:36
What you have currently looks right. However a couple of question are in order. Is your base dir called `app`? If so you need to remove the `app/static` and just use `userimages` as the value of `upload_to`. Also check your Django settings that the right MEDIA_ROOT is set. I'm not sure that you want to upload user photos to static directory because security. If so, you may need to subclass FileSystemStorage to do this. [Read more about what upload_to does](https://docs.djangoproject.com/en/2.0/ref/models/fields/#django.db.models.FileField.upload_to) — Oluwafemi Sule, Feb 28 '18 at 17:47
@OluwafemiSule I modified the code. Now images are uploaded to media/userimages, the image is there, user.employee.avatar.url gives the path media/userimages/name.jpg, yet the image doesn't show. — Adrian, Mar 01 '18 at 18:31
What do you have set for `MEDIA_ROOT` in your Django settings? — Oluwafemi Sule, Mar 02 '18 at 07:52
`MEDIA_ROOT` should be `'/media'` to match the `user.employee.avatar.url` — Oluwafemi Sule, Mar 02 '18 at 09:59

score 1 · Answer 1 · answered Dec 03 '18 at 10:26

You should not use

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

to do this. This is okay only for debug purposes. Otherwise, it's your nginx/apache/other_server that should be responsible for serving static files and media files along with routing the .sock file generated by gunicorn/uwsgi.

score 0 · Accepted Answer · answered Mar 02 '18 at 20:37

I finally figured out how to make it work, so just in case somebody else has the same problem I am going to answer to my question. Basically just add this to settings.py

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

And this to urls.py:

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

Django show ImageField

2 Answers2

Linked