Если вместо изображения видна пустая рамка или значок ошибки, браузер почти всегда не нашёл файл по адресу из src. Сначала проверьте имя и расширение, затем считайте путь от HTML-файла, откройте Network в DevTools и найдите запрос со статусом 404. Сам тег img обычно исправен.
Браузер не ищет картинку по всему компьютеру. Он берёт адрес из src и разрешает его относительно URL текущей страницы. Поэтому файл может лежать прямо рядом, но путь images/cat.png ведёт в несуществующую подпапку. На Windows ещё легко пропустить разницу между Photo.PNG и photo.png, а после публикации сайт на Linux перестаёт прощать такой регистр.
Проверяем точное расширение, пробелы и регистр букв в имени файла.
Идём от файла страницы к папке изображения, а не от корня диска.
В Network смотрим полный URL, статус и ответ сервера вместо перебора вариантов.
Как браузер превращает src в адрес картинки
Атрибут src принимает URL. Он бывает относительным, например images/avatar.png, или абсолютным, например https://example.com/avatar.png. Относительный путь начинается от адреса HTML-документа. Запись ../ поднимается на одну папку, а начальный слеш /images/avatar.png идёт от корня сайта. Это четыре разных адреса, даже если имя файла одинаковое.
| Структура | src | Куда смотрит браузер |
|---|---|---|
index.html и cat.png рядом | cat.png | В ту же папку |
Картинка в images/ | images/cat.png | В подпапку images |
HTML в pages/, картинка в images/ | ../images/cat.png | Сначала на уровень вверх |
| Файл доступен от корня сайта | /images/cat.png | От домена, а не от текущей папки |
Браузер соединяет адрес страницы и src. Ошибка в одном сегменте приводит к другому URL.
src после её текущего URL. Так ошибка становится видна без угадывания.Собираем минимальный рабочий пример
Положите index.html рядом с папкой images, а внутрь папки добавьте файл cat.jpg. Укажите размеры, чтобы страница заранее зарезервировала место, и напишите осмысленный alt. Alt не чинит путь, но объясняет содержание, если изображение не загрузилось или страницу читает экранный диктор.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Карточка питомца</title>
</head>
<body>
<figure>
<img
src="images/cat.jpg"
width="640"
height="426"
alt="Рыжий кот сидит у окна">
<figcaption>Фото лежит в папке images рядом с index.html.</figcaption>
</figure>
</body>
</html>- На странице видна фотография размером до 640 на 426 пикселей, а под ней находится подпись.
- Во вкладке Network запрос
cat.jpgполучает статус 200, а его тип начинается сimage/. - Если временно переименовать файл, появляется alt-текст, а Network показывает ошибочный запрос.
Структура папок и src должны описывать один и тот же маршрут.
Как за минуту найти 404 через DevTools
Откройте инструменты разработчика клавишей F12, перейдите во вкладку Network и обновите страницу. Включите фильтр Img. Красная строка покажет адрес, который запросил браузер. Скопируйте Request URL и откройте в новой вкладке. Если сервер отвечает 404, исправлять CSS бессмысленно: сначала нужен правильный URL.
| Что видно | Причина | Следующая проверка |
|---|---|---|
404 Not Found | Файла нет по указанному адресу | Путь, имя, регистр и публикация файла |
200, но не изображение | Сервер вернул HTML или ошибочную заглушку | Content-Type и содержимое ответа |
| Запроса нет | Тег не попал в DOM или src пустой | Elements и итоговая разметка |
| Локально работает, на сайте нет | Разный регистр или файл не загружен | Репозиторий и точное имя на сервере |
display и другие стили проверяйте только после ответа 200.Практика: ломаем путь и чиним его по сигналам
Полезно один раз намеренно сломать пример. Тогда значок ошибки перестаёт быть загадкой: вы увидите, как конкретная опечатка превращается в конкретный URL. Используйте Live Server или другой локальный сервер, потому что адреса опубликованного сайта ближе к HTTP, чем открытие файла через file://.
- Откройте рабочий пример и убедитесь, что
images/cat.jpgполучает 200. - Замените папку на
image/cat.jpg. Найдите 404 и сравните Request URL со структурой проекта. - Верните папку, но напишите
Cat.JPG. Проверьте, совпадает ли регистр с настоящим файлом. - Добавьте к имени лишний пробел перед расширением и снова найдите его в закодированном URL.
- Верните точный путь и проверьте, что статус стал 200 без изменений CSS.
- Переместите HTML в папку
pagesи осознанно измените путь на../images/cat.jpg.
- Вы умеете вычислить путь по структуре папок, а не подбирать количество
../. - Вы отличаете проблему загрузки от проблемы размера или видимости.
- Вы можете доказать исправление статусом 200 и открытием URL картинки отдельно.
Сначала загрузка, потом тип ответа, затем CSS. Такой порядок не смешивает причины.
Частые причины, которые выглядят одинаково
Одинаковый значок сломанной картинки скрывает разные ошибки. Проверяйте их в одном порядке: HTML, итоговый URL, ответ сервера, тип файла и только потом стили. Такая цепочка работает и для CSS-фонов, видео, шрифтов и других ресурсов страницы.
Файл называется cat.jpg.png, хотя виден как cat.jpg. Включите отображение расширений и переименуйте точно.
В URL используйте прямой слеш: images/cat.jpg. Путь Windows C:\... не является адресом сайта.
Logo.PNG и logo.png могут считаться разными файлами на сервере. Договоритесь о нижнем регистре.
При статусе 200 проверьте display, нулевую ширину, прозрачность и перекрытие. Это уже отдельный уровень, не путь.
Откуда считается относительный путь в src?
От URL текущего HTML-документа.
Как перейти к родительской папке в src?
Путь ../ поднимает поиск на один уровень выше относительно текущей папки страницы.
Почему локально работает, а после публикации нет?
Частая причина: различие регистра букв или незагруженный файл.
Что первым смотреть в DevTools?
Request URL и HTTP-статус запроса картинки во вкладке Network.
Нужно ли чинить CSS при статусе 404?
Нет. Сначала сделайте URL правильным и получите ответ 200.
Соберите структуру страницы в курсе HTML, а оформление добавьте в курсе CSS. Там каждый ресурс сразу виден в результате, поэтому связь между файлом и адресом запоминается быстрее.
После этого опубликуйте работу по гайду GitHub Pages, проверьте адаптивность на телефоне и подключите поведение через JavaScript.