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

【问题标题】：How to display the same link source with modal as with image?如何使用模态显示与图像相同的链接源？
【发布时间】：2020-02-02 06:00:40
【问题描述】：

我正在创建一个基于 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: "https://i.pinimg.com/originals/4c/94/12/4c9412f545041bf4c9e1642320ff965d.jpg", 
urlModal: "https://i.pinimg.com/originals/4c/94/12/4c9412f545041bf4c9e1642320ff965d.jpg",
    }

我希望在模态上显示与网页上相同的图像。希望你能理解我，你可以帮助我:)

【问题讨论】：

很久没用Bootstrap了，如果我没记错你的错误来自于模态...你需要传递对应的ID。
@Kirasiris 将此添加为答案，以便 Rafal 可以接受！
@Rafal 你能修复它吗？
是的，匹配的 ID 解决了这个问题，再次感谢！