Почему одна картинка не загружается, а остальная страница — да

Страница загружается, текст отображается, а одна картинка остаётся сломанной иконкой. Первая реакция — винить туннель, потому что изменился именно туннель. Прежде чем это делать, выясните, какой URL браузер на самом деле запросил для этой картинки, потому что URL страницы и URL картинки — два разных доказательства. Большинство сообщений об отсутствующей картинке сводятся к хосту, который так и не получил рабочего запроса, и этот ответ стоит одного взгляда на панель «Сеть».

Три условия определяют, где искать

Первое условие — приходит ли картинка с того же хоста, что и страница. Отдельному хосту изображений нужны собственное разрешение имён, собственное соединение и собственная идентичность TLS, поэтому загружающаяся страница ничего о нём не говорит.

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

Третье — удалась ли доставка и не удалась ли отрисовка, случай, когда байты приходят, а картинка всё равно не появляется. У этих трёх условий три разных владельца, и только первое относится к сети.

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

URL, который вы видите в исходном коде страницы, часто не тот, который был запрошен. Наборы источников, элементы picture и фоны CSS позволяют браузеру выбрать другой ресурс в зависимости от ширины области просмотра, плотности пикселей или поддержки формата. Лениво загружаемая картинка может вообще не запрашиваться, пока страница не достигнет определённого состояния.

Изучайте элемент и запрос вместе и сохраняйте инициатора рядом с запросом, когда сообщаете о проблеме. Справочник по элементу изображения от MDN в одном месте описывает выбор источника, поведение при загрузке и управление реферером, чего достаточно, чтобы понять, какой атрибут выбрал неудачный URL.

Запишите имя хоста, статус, любую цепочку перенаправлений и тип содержимого ответа. Ответ 200, который возвращает страницу входа, не является пригодной картинкой, а перенаправление на HTML-страницу ошибки выглядит так же, как повреждённый файл, пока вы не прочитаете тип.

Читайте статус раньше сети

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

Если запрос вообще не появляется, перестаньте смотреть на сеть и посмотрите на разметку. Самая частая причина — запись в наборе источников, которой браузер отдал предпочтение и которой уже нет на сервере, а за ней элемент, который скрипт так и не сделал видимым.

Одно это разграничение предотвращает большую часть напрасной работы в сообщениях такого рода.

Когда браузер блокирует, читать ответ нечего

Смешанное содержимое — классический случай: страница HTTPS, запрашивающая картинку по обычному HTTP, получает запрос заблокированным, а не неудачным, и консоль записывает причину. Политика безопасности содержимого даёт ту же форму, а заблокированная директива называется в сообщении. Политика реферера, удаляющая заголовок, тоже может заставить хост с защитой от хотлинков вернуть заглушку вместо картинки.

Прочитайте записанную причину, прежде чем трогать сетевой путь, потому что эти блокировки не улучшаются при смене маршрута. Добавление разрешений между источниками тоже не решение: показ картинки с другого хоста и чтение её пикселей в canvas — разные операции, и только вторая требует заголовков, которые люди вставляют.

Для сайта, которым вы управляете, исправьте URL ресурса, ответ или политику у её владельца и сохраните требования авторизации и реферера неизменными. Для сайта, который вы не контролируете, отправьте страницу и доказательства запроса в его канал поддержки вместо повторной публикации приватных или истекающих ссылок на ресурсы.

Сравнивайте пути, не меняя доказательства

Если вы действительно хотите проверить путь доступа, держите всё остальное неизменным: та же страница, та же учётная запись, та же выбранная картинка, один разрешённый путь изменён. Сравнивайте записи запросов рядом, а не отрисованный результат, потому что отрисованный результат говорит, появилась ли картинка, а не почему.

Картинка, которая загружается по новому маршруту, не доказывает, что этот маршрут разрешён, а картинка, которая остаётся сломанной, не доказывает, что виноват туннель. Если картинку удалили или доступ намеренно ограничен, используйте поддерживаемую альтернативу вместо отключения проверок сертификатов или копирования чужого защищённого материала.

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