Bootstrap modal не отображает изображения, загруженные в django

hello У меня проблема с показом нескольких изображений, которые находятся в моей базе данных, при вызове модала, они просто не отображаются. Я нашел мало информации об этом и то, что я нашел, кажется очень трудным для понимания. Не могли бы вы помочь мне объяснить, как это должно быть, чтобы показать изображения, которые находятся в моей базе данных через мой модал?

Изображения хорошо загружаются в базу данных, единственной проблемой является отображение каждого из изображений, когда я нажимаю на изображение, ничего не происходит, он не вызывает модальное окно с изображениями

HTML

{% for carro in carros %}
<tr>
   <td>{{carro.fecha_registros}}</td>
       {% if carro.fotosCarro %}
   </td>
   <a data-bs-toggle="modal" data-bs-target="#exampleModal{{ forloop.counter }}">
      <img src="{{carro.fotosCarro.url}}" height="68">
   </a>
   </td>
      {% endif %}
   <td>{{carro.placas}}</td>
   <td>{{carro.año}}</td>
   <td>{{carro.modelo}}</td>
   <td>{{carro.color}}</td>
   <td>{{carro.cliente.nombre}}</td>
</tr>
{% endfor %}

модальный

<div class="modal fade" id="exampleModal{{ forloop.counter }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-xl">
                      <div class="modal-content">
                        <div class="modal-header">
                          <!-- <h5 class="modal-title" id="exampleModalLabel"></h5> -->
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                          <div class="table-responsive">
                            <div class="row">
                                <div class="col-lg-12">
                                    <!-- Swiper -->
                                    <div class="swiper mySwiper">
                                        <div class="swiper-wrapper">
                                        {% if carro.fotosCarro %}
                                        <div class="swiper-slide"><img src="{{carro.fotosCarro.url}}" height="68"></div>
                                        </div>
                                        {% endif %}
                                        <div class="swiper-pagination"></div>
                                    </div>

                                </div>
                            </div>
                            <!-- end row -->
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                      </div>
                    </div>
                </div>
</div>

JS

<script>
    $('#exampleModal').on('shown.bs.modal', function () {
    $('#myInput').trigger('focus')
     })
</script>

views.py

def list_cars(request):

    if request.method == 'POST':
        fromdate=request.POST.get('fromdate')
        todate = request.POST.get('todate')
        searchresult = Carro.objects.filter(fecha_registros__range=(fromdate, todate))
        return render(request,'carros/index.html',{'carros':searchresult})

    else:
        displaydata = Carro.objects.all()
    return render(request, 'carros/index.html', {'carros': displaydata})

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