如何显示与图像相同的模态链接源？

我正在建立基于ejs的图库网页，虽然我可以使用.forEach方法正确显示图像，但是当我尝试为当前图像打开模式时，它仅适用于第一幅图像。

我已经尝试将用于图像和模态的代码放置.forEach方法分开，但它带来了相同的结果-每个模态上都存在相同的图像

所以这是我的EJS：

<%galleryImg.forEach((i) => { %>
    <div class="gallery-item">
        <%let link = i.url%>
            <img class="gallery-img" src="<%= link %>"/>

            <div class="img-hover">
                <div class="text">
                    <button data-toggle="modal" data-target="#gallery-modal">See more</button>
                </div>
            </div>        
    </div>

    <div class="modal fade bd-example-modal-lg" id="gallery-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content ">

                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-9">
                                <img class="gallery-img" src="i.urlModall"/>
                            </div>
                            <div class="col md-3">
                                <h4 class="float-center"><strong>Title</strong></h4>

                                <p>
                                    Lorem ipsum 
                                </p>

                                <div class="modal-footer justify-content-center">
                                    <button type="button">
                                        <span><i class="fas fa-shopping-basket"></i></span> SHOP
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <%})%>

还有这是app.js对象，我目前在其中存储源链接（以及其他链接）：

    const galleryImg = [
    {url: ".jpg", 
urlModal: ".jpg",
    }

我希望以模态形式显示与网页上相同的图像。希望你能理解我，并且可以帮助我：）

自从我使用Bootstrap以来已经很长时间了，但是如果我没记错的话，您的错误来自于模式...您需要传递相应的ID。

<button data-toggle="modal" data-target="#gallery-modal SOME_ID">See more</button>
<div class="modal fade bd-example-modal-lg" id="gallery-modal SOME_ID" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
```.

如何显示与图像相同的模态链接源？

我正在建立基于ejs的图库网页，虽然我可以使用.forEach方法正确显示图像，但是当我尝试为当前图像打开模式时，它仅适用于第一幅图像。

我已经尝试将用于图像和模态的代码放置.forEach方法分开，但它带来了相同的结果-每个模态上都存在相同的图像

所以这是我的EJS：

<%galleryImg.forEach((i) => { %>
    <div class="gallery-item">
        <%let link = i.url%>
            <img class="gallery-img" src="<%= link %>"/>

            <div class="img-hover">
                <div class="text">
                    <button data-toggle="modal" data-target="#gallery-modal">See more</button>
                </div>
            </div>        
    </div>

    <div class="modal fade bd-example-modal-lg" id="gallery-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content ">

                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-9">
                                <img class="gallery-img" src="i.urlModall"/>
                            </div>
                            <div class="col md-3">
                                <h4 class="float-center"><strong>Title</strong></h4>

                                <p>
                                    Lorem ipsum 
                                </p>

                                <div class="modal-footer justify-content-center">
                                    <button type="button">
                                        <span><i class="fas fa-shopping-basket"></i></span> SHOP
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <%})%>

还有这是app.js对象，我目前在其中存储源链接（以及其他链接）：

    const galleryImg = [
    {url: ".jpg", 
urlModal: ".jpg",
    }

我希望以模态形式显示与网页上相同的图像。希望你能理解我，并且可以帮助我：）

自从我使用Bootstrap以来已经很长时间了，但是如果我没记错的话，您的错误来自于模式...您需要传递相应的ID。

<button data-toggle="modal" data-target="#gallery-modal SOME_ID">See more</button>
<div class="modal fade bd-example-modal-lg" id="gallery-modal SOME_ID" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
```.