Почему мое изображение не отображается в модальном окне?

Привет всем, я пытаюсь сделать модальное окно, которое показывает изображение при нажатии кнопки. Но я столкнулся с проблемой и, похоже, не понимаю, почему мое изображение не отображается в моем модальном окне. Я использую bootstrap 4.5.2, чтобы сделать это модальным.

Когда я использую этот URL внутри src: //placehold.it/600x400. Изображение работает нормально, но когда я связываю это же изображение из папки с именем resources, изображение не загружается.

Вот мой код

                <!-- 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"

rafalrozek 21.12.2020 22:44

Используйте консоль браузера (инструменты разработчика) (нажмите F12) и прочитайте все ошибки. Инструменты разработчика содержат вкладку «Инспектор/Элементы» и «Сеть». Пожалуйста, подтвердите: найден ли ресурс (например, ответ HTTP 200)? Если нет, какой фактический URL запрашивается?

Sebastian Simon 21.12.2020 22:45

Спасибо за совет по консоли. Путь должен быть PlanPage/Resources/600x400.png.

John 21.12.2020 22:51
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
523
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Изменение пути к файлу PlanPage/Resources/600x400.png решило проблему.

Другие вопросы по теме