Html 如何使模态显示正确的图像？

我有两张图片，悬停时显示一个缩放按钮，可以在模式中放大所述图片，问题是它只显示第一张图片。我如何使它拉正确的图像？我也在用螺栓

谢谢你的帮助

  <div class="container">
               <div class="row">

         {% for offering in offerings.offerings %}

                    <div class="col-sm-6">
                        <div class="offering-items">
                            <img src="{{ asset(offering.mimage.file, 'files') }}" alt="image" class="img-responsive">

                            <div class="overlay2">
                                <button data-target="#myModal" data-toggle="modal" class="zoom">zoom</button>
                            </div>
                        </div>
                    </div>


                <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-body">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <img src="{{ asset(offering.mimage.file, 'files') }}" alt="image" class="img-responsive">
                        </div>
                    </div>
                </div>
      {% endfor %}
      <!-- end -->
            </div>

{%用于产品中的产品。产品%}
快速移动
&时代；
{%endfor%}

以钢笔或小提琴的形式提供工作问题示例以钢笔或小提琴的形式提供工作问题示例