Как вывести все изображения в цикле for?

У меня есть изображения профилей, я их обрезаю, но выводится одна и та же картинка для всех юзеров.
Во фронтенде не силен от слова совсем, а способ нашел в интернете. Буду рад помощи!
5f670bf3eb6ab284253098.png
{% for profile in profile_list %}
    <svg width="250" height="250">
        <pattern id="pattern" width="100%" height="100%">
            <image href="{{ profile.avatar.url }}" width="200" height="200" preserveAspectRatio="xMidYMin slice"></image>
        </pattern>
        <circle cx="125" cy="125" r="100" fill="url(#pattern)"></circle>
    </svg>
        <h2><a href="{{ profile.get_absolute_url }}">{{ profile.user }}</a></h2>
    {% endfor %}
  • Вопрос задан
  • 164 просмотра
Решения вопроса 1
@alexalexes
id для шаблона заливки круга должен быть для каждого элемента списка свой, так как выражение "url(#pattern)" оперирует css-селектором #pattern на всем html-документе и подхватывает первый попавшийся шаблон в первом попавшимся svg.
В вашем случае, первый id становится валидный и применяется в других svg, а все последующие id -не валидные с точки зрения всего документа html.
Для этих целей в цикле for используйте index. И необходимо сделать более уникальным id, нужно добавить каких-нибудь слов характеризующих его назначение, например, circle_avatar_pattern_{{ index }}.
{% for (index, profile) in profile_list %}
    <svg width="250" height="250">
        <pattern id="circle_avatar_pattern_{{ index }}" width="100%" height="100%">
            <image href="{{ profile.avatar.url }}" width="200" height="200" preserveAspectRatio="xMidYMin slice"></image>
        </pattern>
        <circle cx="125" cy="125" r="100" fill="url(#circle_avatar_pattern_{{ index }})"></circle>
    </svg>
        <h2><a href="{{ profile.get_absolute_url }}">{{ profile.user }}</a></h2>
    {% endfor %}

PS: Установленной среды Python у меня нет, код не проверял, проверяйте у себя.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы