Защо една картинка не се зарежда, а останалата част от страницата — да

Страницата се зарежда, текстът се изобразява, а една картинка е счупена икона. Първата реакция е да обвиним тунела, защото тунелът е това, което се е променило. Преди това установете кой URL адрес браузърът действително е поискал за тази картинка, защото адресът на страницата и адресът на картинката са две различни доказателства. Повечето сигнали за липсваща картинка се свеждат до хост, който така и не е получил работеща заявка, а този отговор струва един поглед към панела „Мрежа“.

Три условия решават къде да търсите

Първото условие е дали картинката идва от същия хост като страницата. Отделен хост за картинки се нуждае от собствено разрешаване на имена, собствена връзка и собствена идентичност по TLS, така че зареждащата се страница не казва нищо за него.

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

Третото е дали доставката е успяла, а изобразяването е неуспешно — случай, в който байтовете пристигат, а картинката все още не се появява. Тези три условия имат три различни собственика и само първото е мрежов въпрос.

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

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

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

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

Прочетете статуса преди мрежата

Изтичане на времето, отказана заявка и грешка при декодиране изискват различни следващи стъпки и кодът на състоянието е това, което ги разделя. Изтичането на времето сочи към разрешаване на имена, маршрут или хост, който не отговаря. Отказаната заявка сочи към политика или слой за оторизация. Грешката при декодиране сочи към байтовете или формата.

Ако заявката изобщо не се появи, спрете да гледате мрежата и погледнете разметката. Най-честата причина е запис в набор от източници, който браузърът е предпочел и който вече не съществува на сървъра, последван от елемент, който скрипт така и не е направил видим.

Само това разграничение предотвратява по-голямата част от похабените усилия при този клас сигнали.

Когато браузърът го блокира, няма отговор за четене

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

Прочетете записаната причина, преди да пипате мрежовия път, защото тези блокировки не се подобряват, когато маршрутът се промени. Добавянето на разрешения между произходи също не е решението: показването на картинка от друг хост и четенето на пикселите ѝ в canvas са различни операции и само втората се нуждае от заглавките, които хората поставят.

За сайт, който администрирате, коригирайте URL адреса на ресурса, отговора или политиката при собственика ѝ и запазете изискванията за оторизация и реферер непокътнати. За сайт, който не контролирате, изпратете страницата и доказателствата за заявката до канала му за поддръжка, вместо да публикувате отново частни или изтичащи връзки към ресурси.

Сравнявайте пътища, без да променяте доказателствата

Ако наистина искате да тествате пътя за достъп, дръжте всичко останало постоянно: същата страница, същият акаунт, същата избрана картинка, един разрешен път променен. Сравнявайте записите на заявките една до друга, а не изобразения резултат, защото изобразеният резултат казва дали картинката се е появила, а не защо.

Картинка, която се зарежда по нов маршрут, не доказва, че този маршрут е разрешен, а картинка, която остава счупена, не доказва, че тунелът е виновен. Ако картинката е премахната или достъпът е умишлено ограничен, използвайте поддържана алтернатива, вместо да изключвате проверките на сертификата или да копирате чужд защитен материал.

Ред на работа: идентифицирайте избрания URL адрес, прочетете статуса и типа му, проверете за записана причина за блокиране, след което сравнявайте по една промяна на пътя наведнъж.