Пройдитесь по объектам в шаблоне и установите фоновое изображение каждого элемента в значение ImageField объекта, используя tailwind css

Из документации tailwind, чтобы установить фоновое изображение на "произвольное значение":

<div class="bg-[url('/img/hero-pattern.svg')]">
  <!-- ... -->
</div>

В моем шаблоне я пытаюсь просмотреть список Artist объектов и построить карточки для каждого из них. У всех объектов Artist есть атрибут profile_picture, который представляет собой ImageField:

{% for artist in artists  %}
  <div class="bg-[url('{{artist.profile_picture.url}}')]">
    <a href = "{{artist.profile_picture.url}}">Link to Image</a> <!-- put this here to make sure the url is correct and this does take me to the image -->
    <h1>Some text</h1>
  </div>
{% endfor %}

И это без применения фонового изображения. Я могу подтвердить, что url правильный, потому что я осмотрел страницу:

  <div class="bg-[url('/media/images/artists/headshot.jpeg')]">
    <a href = "/media/images/artists/headshot.jpeg">Link to Image</a>
    <h1>Some text</h1>
  </div>

и посетил http://127.0.0.1:8000/media/images/artists/headshot.jpeg, где я действительно вижу изображение. Кто-нибудь знает, что здесь происходит? Пока я собираюсь использовать <div style="background-image:url('{{artist.profile_picture.url}}')">, но мне интересно, почему это не работает. Спасибо за любую помощь.

Edit: Использование Tailwind версии 3.0.24

Вернуться на верх