How to pass dictionary value as path to image in django?

Question

I am a beginner in django and currently struggling to pass dict value as path to image. I have dictionary in following format:-

{
                'features': [
                    {
                        'icon': 1,
                        'heading': 'Lorem Ipsum',
                        'description': 'Neque porro quisquam est qui ipsum quia dolor sit amet, adipiscing velit quia dolor sit
                        amet, adipisci velit'
                    },

                    {
                        'icon': 2,
                        'heading': 'Lorem Ipsum',
                        'description': 'Neque porro quisquam est qui ipsum quia dolor sit amet, adipiscing velit quia dolor sit
                        amet, adipisci velit'
                    }

                ]
}

Inside template, I am accessing images in following way:-

{% for feature in content.features %}
                    <div class="col-lg-4 col-md-6 col-sm-12 mx-auto my-1 mt-5 text-center d-flex flex-column align-items-center">
                        <div class="h-40 w-100 d-flex">
                            <img class="img-fluid mx-auto" src="{% static "base/images/{{feature.icon}}" %}"
                                 alt="{{ feature.heading }}" width="100" height="100">
                        </div>
                        <div class="h-60 w-100 d-flex flex-column">
                            <h4 class="feature-caption">{{ feature.heading }}</h4>
                            <p class="feature-description p-2 pt-3 pb-3">{{ feature.description }}</p>
                        </div>
                    </div>
{% endfor %}

However, the images are not loading. Can someone suggest how to solve this?

Are you using jinja2 or djangos template synax? Because `{% static "base/images/{{feature.icon}}" %}` is not valid in django syntax (well, it is valid but you won't get the value of `feature.icon` in the string) — Ralf, Sep 06 '19 at 17:44
@Ralf why? It's perfectly valid, that's how you access a dictionary key in django templates. — dirkgroten, Sep 06 '19 at 17:46
@dirkgroten using `{{ }}` inside a template tag? That is new to me... — Ralf, Sep 06 '19 at 17:47
@vineet look at the final url in your browser source (using the dev tools). — dirkgroten, Sep 06 '19 at 17:47
@Ralf oops missed that. you're right of course. I thought you were talking about the dictionary access. — dirkgroten, Sep 06 '19 at 17:48

Ralf · Accepted Answer · 2019-09-06T18:04:16.630

In case you are using Djangos template syntax, I don't think you can use use {{ }} inside a template tag (that uses {% %}). So the following part is not valid:

src="{% static "base/images/{{feature.icon}}" %}"

You can try to use the add template filter instead. This filter is not intended to be used for strings, only for numbers, but if both parts are strings then it works regardless. Like this:

{% with icon_as_str=feature.icon|stringformat:'d' %}

src="{% static 'base/images/'|add:icon_as_str %}"

{% endwith %}

Or just convert your icon to string in the view and forget about the {% with ... %} block.

Related answer: https://stackoverflow.com/a/4524851/9225671

Otherwise just append the icon after static: `{% static 'base/images/' %}{{ feature.icon }}` — dirkgroten, Sep 06 '19 at 18:03

Razvan Cristea · Answer 2 · 2019-09-06T17:54:18.637

0

Assuming that from your views you pass the dictionary as a variable named content , the way you are calling the values you want is correct:

{% for feature in content.features %}
    {{ feature.icon }}
    {{ feature.heading }}
    {{ feature.description }}
{% endfor %}

Before that, make sure you have the {% load staticfiles %} declared as the very first line inside your html file.

edited Sep 06 '19 at 17:54

answered Sep 06 '19 at 17:52

Razvan Cristea

184
6

that doesn't answer the question – dirkgroten Sep 06 '19 at 17:53
inside `settings.py` what is the value for `STATIC_URL ` ? and also, check if `INSTALLED_APPS` has ` 'django.contrib.staticfiles',` value inside. – Razvan Cristea Sep 06 '19 at 17:56
Also, Django uses some other templating language, very similar to Jinja2 used in Flask. But it isn't Jinja. Just beware of that, because there are some differences between those two. – Razvan Cristea Sep 06 '19 at 17:58

How to pass dictionary value as path to image in django?

2 Answers2