bootstrap modal not showing my clickable image?

Question

Im working on symfony project and in my twig view im getting list of images from database and i want make them clickable s when i click on any image a modal popup appears showing my image

this is my view with the modal

 <div class="container-fluid" style="padding-top: 70px;display: block;">
                            {% for i in img2|slice(0,4) %}
                                <div id="membre_panel" style="display:inline-flex;">
                                    <div id="img_style_grp" style="margin-right: 5px;">
                                        <a href="#" class="pop">
                                        <img src="{{ i.lien }}" id="1" data-toggle="modal" data-target="#myModal" style="width: 90px;height: 70px;">
                                        </a>

                                        <!-- Creates the bootstrap modal where the image will appear -->
                                        <div id="myModal" class="modal fade" role="dialog">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-body">
                                                        <img  id="imgsrc"class="showimage img-responsive" src="" />
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                                {% endfor %}
                        </div>

this is my script

  <script>
    $(document).ready(function () {
        $('img').on('click', function () {
            var image = $(this).attr('src');
            alert(image);
            $('#myModal').on('show.bs.modal', function () {
                $("#imgsrc").attr("src", image);
            });
        });
    });
</script>

this is what i get when i click on the image an empty popup

Answer 1

i found that the problem came from .on function when i switched it with show the photo appears but its not fit to the modal div

 <script>
                            $(document).ready(function () {
                                $('img').on('click', function () {
                                    var image = $(this).attr('src');
                                    $('#myModal').show('show.bs.modal', function () {
                                        $(".showimage").attr('src',image);
                                    });
                                });
                            });
                        </script>