Display images on Django Template Site

Question

I read a lot about including image files, but i still don't get it :(

my models.py

class Movie(models.Model):
    image_url = models.URLField(max_length=1024, blank=True, null=True)
    image_file = models.ImageField(upload_to='poster/', blank=True)

my index.html

{% load staticfiles %}
<img src="{% static "{{movie.image_file}}" %}" />

The pictures are saved on harddisk /myapp/poster

Thanks for helping.

Got it!

<img src="
    {% if movie.image_file %}
        {{ movie.image_file.url }}
    {% else %}
        another-image.jpg
    {% endif %}"
/>

urls.py

+static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py

added MEDIA_URL

Thanks a lot!

possible duplicate of [How to get an ImageField URL within a template?](http://stackoverflow.com/questions/8850535/how-to-get-an-imagefield-url-within-a-template) — rnevius, Jun 08 '15 at 15:22
Try this [answer](http://stackoverflow.com/a/30626791/3945375) — Gocht, Jun 08 '15 at 15:39

Brandon Taylor · Accepted Answer · 2015-06-08T15:34:02.983

1

You just need to do:

<img src="{{ movie.image_file.url }}" />

User uploaded files go to your MEDIA_ROOT + the upload_to parameter in your model field, which is typically a different location that static files are served from when using the {% static %} template tag.

Since your field allows for blank=True you can use a conditional to show a different image, or no image at all: (spaces added to avoid wrapping)

<img src="
    {% if movie.image %}
        {{ movie.image_file.url }}
    {% else %}
        another-image.jpg
    {% endif %}"
/>

alternatively, you could add a model property that does the same thing, or you can just wrap the entire image tag in the if statement to hide it if the field is empty.

edited Jun 08 '15 at 15:34

answered Jun 08 '15 at 15:19

Brandon Taylor

33,823
15
104
144

Thanks, but I get an error: Exception Type: ValueError Exception Value: The 'image_file' attribute has no file associated with it. – Bubbleboy Jun 08 '15 at 15:30
Just using return blue boxes with question marks – Bubbleboy Jun 08 '15 at 15:32
I've updated the answer for you to show an alternative image if the field is empty. – Brandon Taylor Jun 08 '15 at 15:34
I've tried, but still blue boxes. Also tried with movie.image_file.path – Bubbleboy Jun 08 '15 at 15:41
Have you verified that you have a value for the field? If so, what is the value when output to the Python repl? – Brandon Taylor Jun 08 '15 at 15:46
The field is filled on the admin site und movie.image_file.path give me back the right path – Bubbleboy Jun 08 '15 at 15:54
What is your `MEDIA_ROOT`? Are you running with `DEBUG = True` locally? (staticfiles needs this) – Brandon Taylor Jun 08 '15 at 15:56
Didn't set MEDIA_ROOT. DEBUG is True – Bubbleboy Jun 08 '15 at 16:00
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79973/discussion-between-brandon-and-bubbleboy). – Brandon Taylor Jun 08 '15 at 16:03

Aditya Pandhare · Answer 2 · 2015-06-08T17:00:04.863

Set MEDIA_ROOT and add following lines at the end of your urls.py +static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Example:

urlpatterns = patterns('',
    url(r'^$', views.index, name='Index'),
    url(r'^admin/', include(admin.site.urls)),
) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

In img src write {{MODEL_NAME.FIELD_NAME.url}}

This is only for development. Refer https://docs.djangoproject.com/en/1.8/howto/static-files/

Display images on Django Template Site

2 Answers2