Django: Insert image in a template whose path is dynamic

Question

I know I can insert an image in an html generated page based on a template using:

 <img src="{% static "myapp/my_image.jpg" %}" alt="Image Description">

The problem is I want something slightly more complex. Let's say I have an object "user" in my template with a user.first_name and a user.last_name attributes. I would like to insert an image whose path would be:

 <img src="{% static "myapp/{{user.first_name}}_{{user.last_name}}.jpg" %}" alt="Profile Picture">

This line is wrong, I get an error (Django can't parse the expression). Can someone help?

I am building kind of a organization chart with photographs, is that a proper way of including profile pictures for every member (based on the fact that the pictures should be named firstname_lastname.jpg)?

Thanks

Create the path in your view and pass it to the template... – rnevius Jun 01 '16 at 17:04 — rnevius, Jun 01 '16 at 17:04
Or write a method on the User class. – Daniel Roseman Jun 01 '16 at 17:43 — Daniel Roseman, Jun 01 '16 at 17:43

score 8 · Answer 1 · answered Nov 14 '17 at 17:33

8

You can do another thing:

<img src ="{% static 'myapp/' %}{{user.first_name}}_{{user.last_name}}.jpg" alt="Profile Picture">

This will work just as fine. Hope this helps :)

answered Nov 14 '17 at 17:33

Sangat Das

106
2
3

Thank u. It worked perfectly fine – risingStark Feb 07 '22 at 18:36
I'm glad it worked out for you – Sangat Das Feb 11 '22 at 20:51

score 6 · Answer 2 · answered Jun 01 '16 at 17:07

6

While I recommend creating the path in your view and passing it as context to your template, you can also use the add filter:

{% static "myapp/"|add:user.first_name|add:"_"|add:user.last_name|add:".jpg" %}

You could also create a custom template tag for this. Lots of options.

answered Jun 01 '16 at 17:07

rnevius

26,578
10
58
86

Despite the other answer saying that `add` is not suitable for adding strings, this worked fine for me. Django 1.10, Python 3.5.1. – CoderGuy123 Jun 19 '17 at 15:50
I have been searching high and low for this answer...solved my issue immediately. Also thanks to the asker for asking so clearly. I was dinged one point for my long question :( – Qudsia Apr 08 '23 at 16:53

Kloudend · Answer 3 · 2016-06-01T17:21:21.733

You'll have to use a custom filter (don't use add, that's not meant for adding strings).

<img src="{% static 'myapp/'|addstring:user.first_name|addstring:'_'|addstring:user.last_name|addstring:'.jpg' %}" alt="Profile Picture">

Where your custom filter addstring could be

# In : templatetags/<app>_extras.py

from django import template

register = template.Library()

@register.filter
def addstring(s1, s2):
    return str(s1) + str(s2)

Another option is having a custom filter do all the magic & use that in img src:

@register.filter
def imgsrc(user):
    return 'myapp/{}_{}.jpg'.format(user.first_name, user.last_name)

score 0 · Answer 4 · answered Aug 20 '20 at 12:33

If the objective is just to set the dynamic image path. This worked for me. You can try this.

{% load static %}
<img src ="{% static 'images/myimage.jpg' %}" alt="My image" width="1500" height="333" id="plot" style="visibility: hidden"/>
<script>
function imageShow(){
  var name="myname";
  {% load static %}
  var filename="{% static 'images/' %}"+name+".png";
  document.getElementById("plot").src=filename;
  document.getElementById("plot").style.visibility='vsible';
}
</script>

score 0 · Answer 5 · answered Jun 16 '22 at 14:35

0

you can do like this.

<img src ="{% static "folder name"/ %}{{user.first_name}}_{{user.last_name}}.jpg" alt="Profile Picture">

answered Jun 16 '22 at 14:35

DURGA PAVAN SANTOSH KANUMURI

1

Django: Insert image in a template whose path is dynamic

5 Answers5

Linked