如何将img src传递给Bootstrap模式？

Now that I'm getting all the src of the images in the loop. My problem now is that I can't pass it through the modal to show the right image. As a matter of fact, I can't show any image. Here's the code.

<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>

<?php
    $sql = "SELECT * FROM portfolio";
    $query = mysqli_query ($conn, $sql);
?>

<div class="col-md-12">
    <h1>Portfolio</h1>

    <table class="table">

        <?php while ($row = mysqli_fetch_assoc($query)) { ?>

            <tr>
                <td>
                    <br>
                        <a data-toggle="modal" data-target="#myModal1">
                            <img src="<?php echo $row ['pic']; ?>" width="200" height="150" class="getSrc">
                        </a>
                    <br><br>
                </td>
                <td>
                    <h4><a href="<?php echo $row ['link']; ?>" target="_blank"><?php echo $row ['projectName']; ?></a></h4>
                    <?php echo $row ['description']; ?><br><br>

                    <strong class="text-warning"><?php echo $row ['note']; ?></strong>
                </td>
            </tr>

        <?php } ?>

    </table>

</div>

<script type="text/javascript">
     $('.getSrc').click(function() {
        var src =$(this).attr('src');

        $('.showPic').attr('src') = src;
     });
</script>

<!-- MODAL --> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="col-md-12">

                <img src="" class="img-responsive" class="showPic">
            </div>
        </div> 
    </div>
</div>

As the comment says, IDs need to be unique. You should use a class instead.

<?php while ($row = mysqli_fetch_assoc($query)) { ?>
        <img src="<?php echo $row['pic']; ?>" width="100" height="100" class="getSrc">
<?php } ?>

<script type="text/javascript">
     $('.getSrc').click(function() {
        var src = $(this).attr('src');
        alert (src);
     });
</script>

You duplicate the id of the image. In HTML, an id must be unique. Instead, you can use class='getSrc', and in your query replace $('#getSrc') by $('.getSrc')

The problem is that you have multiple img tag with the same id. This is not valid HTML.

What you want is something like this:

<script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>

<?php
    $sql = "SELECT * FROM portfolio";
    $query = mysqli_query ($conn, $sql);
?>

<?php while ($row = mysqli_fetch_assoc($query)) { ?>
        <img src="<?php echo $row['pic']; ?>" width="100" height="100" class="getSrc">
<?php } ?>

<script type="text/javascript">
     $('.getSrc').click(function() {
        var src = $(this).attr('src');
        alert (src);
     });
</script>

Here's a short example of what you've requested.

As others have already pointed out, IDs must be unique, so you can use class instead. This way, you can load all elements having a specific class and then use $.each to iterate through it.

Check this out:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

// When page loads
$(function()
{
    // Handle button click
    $('.getSrc').click(function()
    {
        // Grab all image src
        var myImages = [];
        $('.myImg').each(function() {
            myImages.push($(this).prop('src'));
        })

        // Debug
        console.log(myImages);
    });

});

</script>

<img class="myImg" src="http://worldcup2014.aerobicunionbg.com/wp-content/uploads/2014/01/Logo-BorovetsAerobicsFIGWC2014.png"> 
<img class="myImg" src="https://yt3.ggpht.com/-_fcZ0U-7sUc/AAAAAAAAAAI/AAAAAAAAAAA/yhpp-Bkk23c/s100-c-k-no/photo.jpg"> 
<img class="myImg" src="http://www.gamesrubble.com/games/images/World-Cup-2014.png"> 

<input type="button" class="getSrc" value="Get Images">

Output when you click the button

try this,

    $('.getSrc').click(function(imgsrc) {
     var img = new Image();
    var src = imgsrc;
    alert (src);
    });