Как загрузить изображения в цикле for в шаблоне Django?

Question

Для генератора имен я хочу показать алфавит (например, кликабельные изображения), чтобы отфильтровать начальные, но у меня проблема с загрузкой изображений в цикле for.

Вот два предположения в моем .html:

  {% for letter in initials %}
    <a href="#" onclick="FilterByInitial()"><img width='32' height='32' src="{% static 'lists/icons/{{ letter }}_grey.ico' %}" alt='{{ letter }}' /></a>

    {% with letter|add:'_grey.ico' as myimage %}
      <a href="#" onclick="FilterByInitial()"><img width='32' height='32' src="{% static 'lists/icons/myimage' %}" alt='{{ letter }}' /></a>
    {% endwith %}
  {% endfor %}

Где инициалы - это строка со всеми буквами:

initials = ascii_lowercase

вкладка сети в моем firefox дает myimage и {{ letter }}_grey.ico не найдено.На странице отображается текст замены.И это работает:

src="{% static 'lists/icons/a_grey.ico' %}"

Я даже пытаюсь добавить |safe, но безрезультатно

Answer 1

Ваши подходы не работают, потому что переменные шаблона в строках не оцениваются.

Попробуйте это:

{% with 'lists/icons/'|add:letter|add:'_grey.ico' as myimage %}
  <a href="#" onclick="FilterByInitial()">
    <img width='32' height='32' src="{% static myimage %}" alt='{{ letter }}' />
  </a>
{% endwith %}

В качестве альтернативы, вы можете создать собственный фильтр, например:

# templatetags/image_tags.py
@register.filter
def image_for_letter(letter):
    return f'lists/icons/{letter}_grey.ico'


{% load image_tags %}
...
  <a href="#" onclick="FilterByInitial()">
    <img width='32' height='32' src="{% static letter|image_for_letter %}" alt='{{ letter }}' />
  </a>
{% endwith %}