仅显示轮播/模式中的已加载图像-引导程序

Question

下面是我的网站中模式的布局：

问题是：在该模式下，数据库中仅显示2张图像，但是当我使用预配置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 %}

我试图做的但没用的是创建 {％，如果product.image2％} ，但是在主图像的底部继续出现4张图像。

有帮助吗？

谢谢！