Вставьте div, если фоновое изображение существует

Question

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

{% if post.image %}
    <div class="background"></div>
{% endif %}

И CSS это:

.background{
  position: absolute;
  z-index: -1;
  background-image: url("{{ post.image.url }}");
  width: 100%;
  height: 400px;
}

Изображения хранятся в AWS S3. Происходит следующее: если у объекта нет изображения, страница не загружается и сообщает, что с атрибутом изображения не связан файл. Что я могу сделать?

Answer 1

Также добавьте подтверждение к вашему css и визуализируйте изображение, только если оно существует:

.background{
  position: absolute;
  z-index: -1;
  {% if post.image %}background-image: url("{{ post.image.url }}");{% endif %}
  width: 100%;
  height: 400px;
}