Django 仅在转盘/模式引导中显示加载的图像

Django 仅在转盘/模式引导中显示加载的图像,django,bootstrap-4,Django,Bootstrap 4,以下是我的网站中模式的布局: 问题是:在这个模式下,数据库中只有2个图像要显示,但当我使用PreFig Boostratp时,它总是显示4个图像,而不考虑所需的数量 在本例中,我的目标是仅显示2个图像,如下所示: 在后端,我与Django合作。下面是我的模板: <!-- modal area start--> {% for product in products %} <div class="modal fade" id="modal_box-

以下是我的网站中模式的布局:

问题是:在这个模式下,数据库中只有2个图像要显示,但当我使用PreFig Boostratp时,它总是显示4个图像,而不考虑所需的数量

在本例中,我的目标是仅显示2个图像,如下所示:

在后端,我与Django合作。下面是我的模板:

<!-- modal area start-->
{% for product in products %}
<div class="modal fade" id="modal_box-{{ product.id }}" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <div class="modal_body">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-5 col-md-5 col-sm-12">
                            <div class="modal_tab">
                                <div class="tab-content product-details-large">
                                    <div class="tab-pane fade show active" id="tab1" role="tabpanel" >
                                        <div class="modal_tab_img">
                                            <a href="#"><img src="{{ product.image.url }}" alt=""></a>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="tab2" role="tabpanel">
                                        <div class="modal_tab_img">
                                            {% if product.image2 %}<a href="#"><img src="{{ product.image2.url }}" alt=""></a>{% endif %}
                                        </div>
                                    </div>

                                </div>
                                <div class="modal_tab_button">
                                    <ul class="nav product_navactive owl-carousel" role="tablist">
                                        <li >
                                            <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="false"><img src="{{ product.image.url }}" alt=""></a>
                                        </li>
                                        {% if product.image2 %}
                                        <li>
                                             <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false"><img src="{{ product.image2.url }}" alt=""></a>
                                        </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7 col-md-7 col-sm-12">
                            <div class="modal_right">
                                <div class="modal_title mb-10">
                                    <h2>Donec eu furniture</h2>
                                </div>
                                <div class="modal_price mb-10">
                                    <span class="new_price">R$ {{ product.sell_price }}</span>
                                    <span class="old_price"></span>
                                </div>
                                 <div class="see_all">
                                     <a href="product-details.html">&nbsp;</a>
                                 </div>
                                <div class="modal_add_to_cart mb-15">
                                    <form action="#">
                                        <input min="0" max="100" step="2" value="1" type="number">
                                        <button type="submit">add to cart</button>
                                    </form>
                                </div>
                                <div class="modal_description mb-15">
                                    <p>{{ product.description }}</p>
                                </div>
                                <div class="modal_social">
                                    <h2>Share this product</h2>
                                    <ul>
                                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- modal area end-->
{% endfor %}

{products%中产品的%s}
&时代;
{%if product.image2%}{%endif%}
  • {%if product.image2%}
  • {%endif%}
多尼克欧盟家具 R${{product.sell_price} 添加到购物车 {{product.description}}

共享此产品
{%endfor%}
我试图做的是创建{%if product.image2%},但是在主图像的底部继续出现4个图像,但没有成功

有什么帮助吗

谢谢大家!