Не выводится изображение в модальном окне

@AnykeyFreeman · Регистрация: 26.04.2016

Студворк — интернет-сервис помощи студентам

Всем привет, ситуация у меня такая. На страничке выводятся типа превью изображений(выводятся нормально), при клике на превью должно открыться модальное окно с большой версией изображения, но изображения нет.
Вот исходник:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
echo '<a href="" data-toggle="modal" data-target="#myModal"><img src="' .$row['small']. '" /></img></a>';?>
                
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>  
      </div>
      <div class="modal-body">  <img src="/<? echo $row['big'] ;?>"></img></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" align="center">Закрыть</button>
      </div>
    </div>
  </div>
</div>

А вот, что я вижу в просмотре кода страницы(view-source):

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a href="" data-toggle="modal" data-target="#myModal"><img src="https://www.cyberforum.ru/images/small/2016042513164195.jpg" /></img></a>               
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>  
      </div>
      <div class="modal-body">  <img src="/images/big/2016042513164147.jpg"></img></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" align="center">Закрыть</button>
      </div>
    </div>
  </div>
</div>

Если тыкать по ссылкам во view-source то все работает. А теперь самое интересное, если открыть консоль разработчика, то в теге img нет ничего кроме /

Что я делал не так?

@pl · 26.04.2016, 11:28

Насколько я помню, тэг IMG не парный и следует его записывать так:
HTML <img src="URL" alt="альтернативный текст">
XHTML <img src="URL" alt="альтернативный текст" />

@AnykeyFreeman · 26.04.2016, 11:50 **[ТС]**

Убрал закрывающий тег - не помогло. Добавил / в конец, тоже не помогло

@pl · 26.04.2016, 12:43

Возможно клиентские скрипты очищают тэг IMG, включите отладку в браузере и пройдитесь пошагово, посмотрите когда исчезает картинка.

@AnykeyFreeman · 26.04.2016, 13:17 **[ТС]**

Честно говоря, я вообще не понял про что вы говорите. Какие скрипты могут очищать img? Как с помощью отладки пошагово посмотреть где картинка пропадает?

@pl · 26.04.2016, 16:29

Сообщение от AnykeyFreeman

Какие скрипты могут очищать img?

Клиентские, JavaScript.

Сообщение от AnykeyFreeman

Как с помощью отладки пошагово посмотреть

Используйте вкладку Скрипты, поставьте точку останова и прогоняйте скрипт (клиентский, JavaScript) пошагово, т.е. строчка за строчкой.

@AnykeyFreeman · 27.04.2016, 07:24 **[ТС]**

Но я не использую никаких скриптов. У меня есть 2 подключенных скрипта: Bootstrap и jQuery, оба используются самим Bootstrap.
И, к сожалению, я так и не понял как делать отладку

@0xD61C90 · 27.04.2016, 07:39

Ссылка вида, просто вставленная на страницу

HTML5
1
<img src="/images/big/2016042513164147.jpg">

выводит изображение?

если да -> проверяйте путь, имя файла,
если нет -> проверяйте js, css

@Max Dark · 27.04.2016, 08:10

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

PHP
1
<?php echo $row['big'] ;?>

@AnykeyFreeman · 27.04.2016, 13:31 **[ТС]**

Вот смотрите, ребята

PHP
1
echo '<a href="" data-toggle="modal" data-target="#myModal"><img src="' .$row['small']. '" /></img></a>';?>

Если в этой строчке заменить $row['small'] на $row['big'] - все работает. Если выводить изображения друг за другом сразу - все работает. Перестает работать именно когда я пытаюсь обернуть второе изображение в модальное окно. Все это дело происходит на локальном сервере. Все пути, имена файлов и т.д. нормальные.
А вот JS и CSS я использую стандартные Bootstrap'овские и стандартная jQuery. Точнее я сам ими не пользуюсь, ими пользуется Bootstrap.

Добавлено через 6 минут
0xD61C90, вот кстати если подставить просто сам путь с файлом - все работает. Но $row['big'] работает точно так же как и $row['small'] и если вместе превью ($row['small']) вставлять сразу большую картинку ($row['big']) все работает

@pl · 27.04.2016, 14:19

Сообщение от AnykeyFreeman

Если тыкать по ссылкам во view-source то все работает. А теперь самое интересное, если открыть консоль разработчика, то в теге img нет ничего кроме /

Сообщение от AnykeyFreeman

пытаюсь обернуть второе изображение в модальное окно

Неужели вы сами не видите в чем проблема?
Модальное окно формируется клиентским скриптом на основе сгенерированного HTML кода. Вам надо удостовериться что этот скрипт при формировании модального окна не модифицирует тэг IMG. Сделать это можно посредством пошаговой отладки используя консоль разработчика в браузере.

@AnykeyFreeman · 27.04.2016, 15:18 **[ТС]**

Сообщение от pl

Сделать это можно посредством пошаговой отладки используя консоль разработчика в браузере.

Я не знаю как это делать. Если можете киньте пошаговую инструкцию или ссылку где можно обэтом почитать

@pl · 27.04.2016, 15:25

Сообщение от AnykeyFreeman

А теперь самое интересное, если открыть консоль разработчика

Вы же сами это писали. Как вы тогда работаете с консолью?

Банальный запрос "консоль разработчика браузера" в любом поисковике выдаст массу ссылок на различные описания и руководства.

@AnykeyFreeman · 27.04.2016, 19:47 **[ТС]**

Блин, ребята. Я всего пару недель назад занялся изучением php, решил начать с самого простого - доски объявлений. В консоль разработчика я попадал когда смотрел отдельные элементы блоков, они в этой консоли хорошо подсвечиваются, больше я не знаю что там делать.
Завтра погуглю про отладку, но поверхностное гугление не дало мне ответов

@Dodboy · 27.04.2016, 20:36

Сообщение от AnykeyFreeman

Так попробуйте:

PHP
1
<div class="modal-body"> <?php echo '<img src="/'.$row['big'].'"/>';?><br></div>

@Detektor · 27.04.2016, 20:41

Сообщение от AnykeyFreeman

Я всего пару недель назад занялся изучением php, решил начать с самого простого - доски объявлений. (

я в первую неделю изучения php пытался сделать гостевую книгу,с большими мучениями получилось,потом переделал в колонку новостей

имею ввиду что начинай изучение с гостевой книги,и отдельно админку с паролем

потом задача добавить к гостевой смайлы,ссылки,картинки

потом советую пытаться написать чат,и опять,колонка юзеров онлайн,вход - выход,цвет шрифта,картинки в чате,смайлы...

на пол годика этих 3х задач хватит,много узнаешь,вырастешь,опыт будет

@pl · 27.04.2016, 22:02

Научитесь разделять где работает серверный код, а где клиентский:

Сообщение от AnykeyFreeman

А вот, что я вижу в просмотре кода страницы(view-source):

PHP
1
<div class="modal-body">  <img src="/images/big/2016042513164147.jpg"></img></div>

Это HTML код страницы сгенеренный PHP, и, судя по вашим словам, он рабочий, ссылки все правильные. Значит PHP отрабатывает как нужно и проблема не в нем.

Сообщение от AnykeyFreeman

если открыть консоль разработчика, то в теге img нет ничего

PHP
1
<div class="modal-body">  <img src="/"></div>

Это результат интерпретации HTML кода+CSS стилей+клиентских сценариев (JavaScript) браузером.

Таким образом, с ваших же слов, следует, что проблема формируется на клиенте, в браузере. Проблема эта к PHP отношения не имеет, PHP на клиенте не работает.

@AnykeyFreeman · 28.04.2016, 08:15 **[ТС]**

Dodboy, Нет, не помогла такая конструкция. Я её уже сам пробовал.
pl, Я прекрасно понимаю, что PHP не работает на клиентской стороне. Я, к сожалению, не могу с наскока разобраться с консолью разработчика. Все, что я нагуглил мне не помогает. Там люди ловят баги в своих JS скриптах, мне же надо отловить баг в чужом JS, при том, что я сам в него не лезу. Т.е. я просто подключаю js, а пользуется им bootstrap. Я разобрался(кажется) как сделать Breakpoint, но я не могу понять что делать дальше, как запустить пошагово, где смотреть то, что меняется. Я тыкал тыкал, и нифига не понял, что тыкал. Вроде как тыкал в кнопку запуска/остановки скриптов и у меня выскакивает некий файл BrowersFix.js значит в нем проблема?
P.S. Как сделать вызов пользователя в эту тему?

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@pl 51 / 17 / 6 Регистрация: 18.05.2007 Сообщений: 1,322
	26.04.2016, 11:28
	Насколько я помню, тэг IMG не парный и следует его записывать так: HTML <img src="URL" alt="альтернативный текст"> XHTML <img src="URL" alt="альтернативный текст" /> 0

@AnykeyFreeman 0 / 0 / 0 Регистрация: 26.04.2016 Сообщений: 12
	26.04.2016, 11:50 [ТС]
	Убрал закрывающий тег - не помогло. Добавил / в конец, тоже не помогло 0

@pl 51 / 17 / 6 Регистрация: 18.05.2007 Сообщений: 1,322
	26.04.2016, 12:43
	Возможно клиентские скрипты очищают тэг IMG, включите отладку в браузере и пройдитесь пошагово, посмотрите когда исчезает картинка. 0

@AnykeyFreeman 0 / 0 / 0 Регистрация: 26.04.2016 Сообщений: 12
	26.04.2016, 13:17 [ТС]
	Честно говоря, я вообще не понял про что вы говорите. Какие скрипты могут очищать img? Как с помощью отладки пошагово посмотреть где картинка пропадает? 0

@AnykeyFreeman 0 / 0 / 0 Регистрация: 26.04.2016 Сообщений: 12
	27.04.2016, 07:24 [ТС]
	Но я не использую никаких скриптов. У меня есть 2 подключенных скрипта: Bootstrap и jQuery, оба используются самим Bootstrap. И, к сожалению, я так и не понял как делать отладку 0

@AnykeyFreeman 0 / 0 / 0 Регистрация: 26.04.2016 Сообщений: 12
	27.04.2016, 19:47 [ТС]
	Блин, ребята. Я всего пару недель назад занялся изучением php, решил начать с самого простого - доски объявлений. В консоль разработчика я попадал когда смотрел отдельные элементы блоков, они в этой консоли хорошо подсвечиваются, больше я не знаю что там делать. Завтра погуглю про отладку, но поверхностное гугление не дало мне ответов 0

@AnykeyFreeman 0 / 0 / 0 Регистрация: 26.04.2016 Сообщений: 12
	28.04.2016, 08:15 [ТС]
	Dodboy, Нет, не помогла такая конструкция. Я её уже сам пробовал. pl, Я прекрасно понимаю, что PHP не работает на клиентской стороне. Я, к сожалению, не могу с наскока разобраться с консолью разработчика. Все, что я нагуглил мне не помогает. Там люди ловят баги в своих JS скриптах, мне же надо отловить баг в чужом JS, при том, что я сам в него не лезу. Т.е. я просто подключаю js, а пользуется им bootstrap. Я разобрался(кажется) как сделать Breakpoint, но я не могу понять что делать дальше, как запустить пошагово, где смотреть то, что меняется. Я тыкал тыкал, и нифига не понял, что тыкал. Вроде как тыкал в кнопку запуска/остановки скриптов и у меня выскакивает некий файл BrowersFix.js значит в нем проблема? P.S. Как сделать вызов пользователя в эту тему? Миниатюры 0