How to get an ImageField URL within a template?

Question

I've got the following model in my Django app:

class Image(models.Model):
    image = models.ImageField(
        upload_to='images/', 
        height_field='height', 
        width_field='width'
    )
    credit = models.CharField(max_length=50, blank=True)
    caption = models.TextField(blank=True)
    article = models.ForeignKey(Article)
    width = models.PositiveIntegerField(
        blank = True, null = True,
        editable = False,
        default = 0
    )
    height = models.PositiveIntegerField(
        blank = True, null = True,
        editable = False,
        default = 0
    )

I've set the MEDIA_ROOT to a directory called /hmedia/ inside my Apache web root, and I've set MEDIA_URL to 'http://localhost/hmedia/'. This seems to have worked – I've successfully uploaded a couple of images through the Django admin site, and I can view those images via http://localhost/hmedia/images/[filename]. And the Django admin site actually shows me the filename, and links to the live URL for each image, and the links work.

My problem is, I can't work out how to get the URLs or filenames of these images in my template:

<ul>
{% for image in article.image_set.all %}
    <li>Caption: "{{image.caption}}", Credit: "{{image.credit}}", URL: "{{image.url}}"</li>
{% endfor %}
</ul>

The above template results in this output:

<ul>

    <li>Caption: "here's an image caption", Credit: "some photographer", URL: ""</li>

    <li>Caption: "Another caption here", Credit: "Another photographer", URL: ""</li>

</ul>

In other words, it correctly outputs the caption and credit properties of each image, but it outputs nothing for {{image.url}}.

How do I get the image's URL in my template? How does the Django admin interface template do it? (I've rooted around in the admin templates directory but can't find what I'm looking for.)

Answer 1

What you need is {{ image.image.url }} & {{ image.image.path }}, while {{ image }} - just an Image object, instance of the defined model and {{ image.image }} gets us to the field which is ImageField object and provides all the specified attributes.

Answer 2

if you have ImageForm in forms.py and passing Form Instance to your django template then src="{% get_media_prefix %}{{your-form-instance.instance.image}}" will solve your issue.

models.py

class Addon(models.Model):
    image = models.FileField(upload_to='addons/', null=True)
    addon_name = models.CharField(max_length=100, null=False, blank=False)

forms.py

class AddonForm(forms.ModelForm):
    addon_name = forms.CharField(max_length=100, required=True)
    image = forms.ImageField(required=False)

views.py

@require_http_methods(['GET'])
def addons(request, ):
    addon_form_set = modelformset_factory(Addon, form=AddonForm, extra=1)
    addon_forms = addon_form_set(queryset=Addon.objects.all())
    return render(request, 'addons/addons.html', {'form': addon_forms)

your_templates.html

{% for data in form %}
   <img src="{% get_media_prefix %}{{data.instance.image}}"/>
{% endfor %}

Answer 3

Change your code to this:

<ul>
{% for image in article.image_set.all %}
    <li>Caption: "{{ image.caption }}", Credit: "{{ image.credit }}", URL: "<a href ='/{{ image.image }}'{{ image.image }}</a>"</li>
{% endfor %}
</ul>

Change {{ image.url }} to {{ image.image }} because '.image' contains the location of the image. The reason that you don't get any value from '.url' is that you don't have a field url in your class Image in your models.

Answer 4

Create a folder "static" in you're django project and add this to you're settings file

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

If you don't have this line in you're settings file also add it

BASE_DIR = os.path.dirname(os.path.dirname(__file__))

Now in the template you can use

{% static  image.image.url %}