Создание полезных сайтов
Не загружаются картинки на сайте? Проверьте адрес, ответ и CSS
Проверьте одну пропавшую картинку от адреса запроса до видимого элемента и подтвердите исправление на публичной странице.
1. Найдите запрос картинки, который сделал браузер
Выберите одну пропавшую картинку на опубликованной странице и скопируйте итоговый адрес страницы. Это руководство — об HTML-элементах изображений, включая адаптивные. Фоновые картинки CSS нужно исследовать отдельно.
В настольном Chrome откройте DevTools → Network, перезагрузите страницу и найдите запрос изображения. При отложенной загрузке прокрутите страницу до картинки. Выберите строку и запишите Request URL, статус и Content-Type из Headers. Посмотрите Preview или Response: что именно пришло? Эти панели описаны в справочнике Chrome Network.
Если подходящего запроса нет, найдите элемент изображения в Elements. Проверьте src, srcset и окружающие элементы picture/source. Отсутствующий или пустой адрес, отложенная загрузка и скрипт, который ещё не заполнил элемент, требуют иной проверки, чем ошибка сервера. Сохраните сообщение браузера о блокировке, если оно есть.
2. За статусом 200 может скрываться другой ответ
Адрес с окончанием .svg или .jpg ещё не доказывает, что пришла картинка. Проверьте содержимое ответа: форма входа, шаблон ошибки или оболочка приложения остаются HTML даже со статусом 200. Сопоставьте Content-Type с телом ответа и предпросмотром; один заголовок не подтверждает пригодность файла.
В локальном опыте Coru 21 октября 2026 года адрес /fallback/card.svg отдавал HTML со статусом 200. Chromium 155.0.8059.12 не смог показать его как изображение: naturalWidth равнялся 0, а complete — true. Проверка только расширения или статуса не выявила бы ошибку маршрутизации.
- 404: проверьте итоговый адрес запроса и наличие файла в опубликованной версии по этому пути.
- 403 или перенаправление на вход: изучите правило доступа и конечный ответ этого запроса.
- 200 с HTML: исправьте маршрут или резервный ответ, чтобы по адресу приходил нужный файл изображения.
- Пришло изображение, но оно не отображается: проверьте целостность файла и поддержку формата нужным браузером.
3. Считайте путь от опубликованной страницы
MDN описывает разрешение относительных адресов через базовый URL. Мы проверили src="images/card.svg": со страницы /notes/page/ браузер запросил /notes/page/images/card.svg, а со страницы /notes/page — /notes/images/card.svg. Последний слеш изменил результат. Оба адреса отличались от рабочего /images/card.svg в нашем опыте.
Начальный слеш задаёт путь от корня базового URL. Обычно это корень текущего сайта; если base указывает на другой сайт, используется его корень. Если сайт опубликован в /project/, адрес /images/card.svg не включает этот префикс: правильным может быть /project/images/card.svg. Выбирайте путь по реальному расположению опубликованного файла.
Элемент base может изменить разрешение относительных адресов во всём документе. Во втором примере base href="/assets/" заставил src="card.svg" обратиться к /assets/card.svg. Выражение document.baseURI в Console показывает используемый базовый адрес. Проверьте его, прежде чем менять все пути. Это общее действие base описано в справочнике MDN.
4. Сверьте точное имя опубликованного файла
Сопоставьте запрошенный путь с опубликованным файлом: регистр букв, расширение и папку. MDN отмечает, что многие серверы различают большие и маленькие буквы. Поэтому рабочая локально картинка может пропасть после публикации; результат зависит от маршрутизации и хранения файлов на сервере.
Наш тестовый обработчик намеренно различал регистр: /images/card.svg возвращал 200, а /images/Card.svg — 404. Это проверка конкретной настройки, а не утверждение об одинаковом поведении всех серверов. Исправьте ссылку или имя файла и проверьте публичный адрес. Прежде чем менять сжатие, убедитесь, что файл вообще попал в опубликованную версию.
5. Если сбой зависит от устройства, проверьте currentSrc
Выберите именно элемент img в Chrome Elements и введите $0.currentSrc в Console. Это адрес выбранного изображения; $0.src показывает полный URL, вычисленный из src. MDN объясняет, что при srcset адрес currentSrc может отличаться и сам по себе не подтверждает успешную загрузку.
В нашем примере были рабочий src="/images/card.svg" и srcset="/missing-large.svg 2x". При коэффициенте плотности пикселей устройства 2 Chromium выбрал отсутствующий большой вариант, и картинка не появилась. Если открыть только рабочий src, получится проверка другого ресурса.
Посмотрите выбранный вариант и его ответ в Network при ширине окна и плотности пикселей, на которых возникает ошибка. Повторите при другом нужном размере. Восстановите отсутствующие варианты srcset или picture и проверьте их опубликованные адреса. Для резкости и объёма загрузки используйте связанное руководство о размерах изображений.
6. Отличите отсутствие данных от скрытого элемента
При выбранном img проверьте $0.complete и $0.naturalWidth. По документации MDN, complete бывает true и у сломанного изображения. naturalWidth — внутренняя ширина с поправкой на плотность пикселей; ноль возможен при недоступных данных или отсутствии внутренней ширины. Сопоставляйте эти признаки с запросом и отображением: универсальной проверки успеха здесь нет.
Наш собственный SVG размером 120 × 80 успешно загрузился, но display:none сделал ширину его видимого блока нулевой. naturalWidth остался равным 120. Ресурс был на месте, его скрывал CSS. В Elements → Computed проверьте изображение и его родителей: display, visibility, opacity, нулевые размеры и обрезку. Временно отключите подозрительное правило, чтобы проверить причину, затем исправьте таблицу стилей.
Локальный опыт использовал одну сборку Chromium и заданные маршруты. Он не проверял ваш CDN, права доступа или политику безопасности браузера. Если браузер сообщает о блокировке ресурса, изучите указанную причину.
7. Проверьте исправление через публичную страницу
Запишите короткую цепочку: адрес страницы → выбранный адрес картинки → статус и содержимое ответа → внутренняя ширина и видимый блок → причина → исправление → результат обычной перезагрузки. Для адаптивных изображений укажите ширину окна и плотность пикселей.
Проверяемый результат — нужная картинка видна в контексте страницы при выбранных размерах, полезные детали и альтернативный текст сохранены. После публикации снова откройте публичную страницу и другую страницу с тем же файлом. Если всё ещё приходит старая картинка или старый HTML, переходите к связанному руководству об устаревшей версии. Сообщение об успешной загрузке файла само по себе не подтверждает доставку читателю.