【问题标题】:Why is my image not showing in the modal?为什么我的图像没有显示在模态中?
【发布时间】:2021-03-31 15:50:10
【问题描述】:

大家好,我正在尝试制作一个在单击按钮时显示图像的模式。但是我遇到了一个问题,似乎不明白为什么我的图像没有显示在我的模态中。我正在使用 bootstrap 4.5.2 来制作这个模式。

当我在 src 中使用这个 url 时://placehold.it/600x400。该图像工作正常,但是当我从名为资源的文件夹中链接相同的图像时,图像不会加载。

这是我的代码

                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
                    Launch demo modal
                </button>

                <!-- Modal -->
                <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body" id="dynamic-content">
                                <img src="Resources/600x400.png" alt="officeMap" class="img-fluid">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>

这是我的路

【问题讨论】:

  • 试试src="./Resources/600x400.png"
  • 使用browser console (dev tools)(点击F12)并阅读任何错误。开发工具提供了一个 Inspector / Elements 和一个 Network 选项卡。请确认:资源是否找到(例如 HTTP 200 响应)?如果不是,则请求哪个实际 URL
  • 感谢控制台提示。路径应该是 PlanPage/Resources/600x400.png。

标签: html bootstrap-4 directory


【解决方案1】:

将文件路径更改为 PlanPage/Resources/600x400.png 解决了问题。

【讨论】:

    猜你喜欢
    • 2021-10-10
    • 1970-01-01
    • 2016-07-12
    • 2018-09-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-06
    • 1970-01-01
    相关资源
    最近更新 更多