Django - How can I display a photo saved in ImageField?

Question

I've been going around in circles for hours with this.
I have a UserProfile model with profile_pic ImageField. I saved the user photo and now I want to display it, but nothing works. I went through docs, SO, google, with no result.
I uploaded a photo, and I can see that the url was saved in the database. This is what I have:

# models.py
    class UserProfile(models.Model):
        ...
        title       = models.CharField()
        about_me    = models.CharField()
        profile_pic = models.ImageField(upload_to=content_file_name, blank=True)

# views.py
    def user_details(request):
        if request.method == 'POST':
            form = UserProfileForm(request.POST, request.FILES, instance=request.user.get_profile())
            if form.is_valid():
                form.save()
                return HttpResponseRedirect('/')
        else:
            form = UserProfileForm(instance=request.user.get_profile())
        return render_to_response('user_details.html',
                {'user': request.user, 'form': form},
                context_instance=RequestContext(request))

# user_details.html
    {% for field in form %}
      {% if field.name != "profile_pic" %}
        <!-- display regular fields -->
        {{ field.label_tag }}{{ field }}
      {% else %}
        <!-- display the user photo -->
        <img src="{{ MEDIA_URL }}{{ field.url }}" />
      {% endif %}
    {% endfor %}

When I view the source of the rendered HTML, all I see is the MEDIA_URL (ie 'media/') but not the photo url. If I replace {{ field.url }} with {{ field }} I get the url with the label "Currently", a "Clear" checkbox and an option to change image. But I cannot see the image itself.
Can anyone suggest what am I doing wrong?

Chris Pratt · Accepted Answer · 2012-03-22T21:29:38.653

21

Sorry, I didn't pay close enough attention to the context of field. The "field" you get from the for loop is a specialized wrapper that includes other data about the field for the purposes of constructing the form. It's not the field on the model itself, just a representation of it for the purposes of the form.

To get the current value of profile_pic, you need to use the form's instance:

<img src="{{ form.instance.profile_pic.url }}" />

{{ MEDIA_URL }} is unnecessary when using the url attribute, since it automatically appends MEDIA_URL.

edited Mar 22 '12 at 21:29

answered Mar 22 '12 at 20:54

Chris Pratt

232,153
36
385
444

@Crhis, thanks for the answer. However, this still is not working. Now Django renders "media/profile_pic" (the field name, not the actual image filename and path) – user1102018 Mar 22 '12 at 21:00
thanks again. It works now! I wish there was some thorough docs regarding the wrapper. This would have saved me hours of trying to figure out what I was doing wrong. Cheers! – user1102018 Mar 22 '12 at 21:36

score 8 · Answer 2 · answered Aug 20 '14 at 19:32

This works for me:

    {% for field in form %}
    <p>
        {{ field.errors }}
        {{ field.label_tag }}
        {% if field.field|get_type == "django.forms.fields.ImageField" and field.value %}
            <br/><img src="{{ field.value.url }}" width="240"></img></br>
        {% endif %}
        {{ field }}
    </p>
    {% endfor %}

get_type is a templatetag defined as:

from django import template

register = template.Library()

@register.filter
def get_type(value):
    t = type(value)
    return t.__module__ + "." + t.__name__

Django - How can I display a photo saved in ImageField?

2 Answers2

Linked