Bakit nabibigo ang isang larawan habang naglo-load ang iba pang bahagi ng pahina
Tatlong kondisyon ang naghihiwalay ng depekto sa network mula sa hinaharangan na kahilingan at sa error sa pag-render. Hanapin ang URL na pinili ng browser bago baguhin ang landas.
Naglo-load ang pahina, lumalabas ang teksto, at isang larawan ang nananatiling sirang icon. Ang unang reaksyon ay sisihin ang tunnel, dahil ang tunnel ang bagay na nagbago. Bago iyon, alamin kung aling URL ang tunay na hiniling ng browser para sa larawang iyon, dahil ang URL ng pahina at ang URL ng larawan ay dalawang magkaibang ebidensya. Karamihan sa mga ulat tungkol sa nawawalang larawan ay nauuwi sa host na kailanman ay hindi nakatanggap ng gumaganang kahilingan, at ang sagot na iyon ay isang sulyap lang sa panel ng Network.
Tatlong kondisyon ang nagpapasya kung saan titingin
Ang unang kondisyon ay kung ang larawan ay nagmumula sa parehong host ng pahina. Ang hiwalay na host ng larawan ay nangangailangan ng sariling resolusyon ng pangalan, sariling koneksyon at sariling pagkakakilanlan sa TLS, kaya ang pahinang naglo-load ay walang masasabi tungkol dito.
Ang pangalawa ay kung hinadlangan ng browser ang kahilingan bago ito ipadala. Ang pinaghalong nilalaman, patakaran sa seguridad ng nilalaman at mga tuntunin ng referrer ay maaaring pumigil sa larawan nang walang ordinaryong tugon ng server, kaya wala sa listahan ang nabigong kahilingan.
Ang pangatlo ay kung nagtagumpay ang paghahatid at nabigo ang pag-render, kaso kung saan dumarating ang mga byte ngunit hindi pa rin lumilitaw ang larawan. Ang tatlong kondisyong ito ay may tatlong magkaibang may-ari, at ang una lang ang usapin ng network.
| What you see | Where the fault sits |
|---|---|
| Request absent from the list | Markup, lazy loading or a policy that blocked it |
| Request failed or timed out | Resolution, route, TLS or the image host itself |
| Request returned 200, image blank | Response type, decoding or rendering |
Hanapin ang resource na tunay na pinili ng browser
Ang URL na nakikita mo sa source ng pahina ay madalas hindi ang URL na hiniling. Ang mga source set, elementong picture at background ng CSS ay hinahayaan ang browser na pumili ng ibang resource batay sa lapad ng viewport, density ng pixel o suporta sa format. Ang larawang mabagal na naglo-load ay maaaring hindi hilingin kahit kaunti hanggang maabot ng pahina ang isang partikular na estado.
Suriin ang elemento at ang kahilingan nang magkasama, at panatilihin ang nagpasimula kasama ng kahilingan kapag inuulat mo ang problema. Ang sanggunian sa elementong larawan ng MDN ay sumasaklaw sa pagpili ng source, pag-uugali sa pag-load at mga kontrol ng referrer sa isang lugar, na sapat upang sabihin kung aling attribute ang pumili ng nabigong URL.
Itala ang pangalan ng host, katayuan, anumang kadena ng redirect at uri ng nilalaman ng tugon. Ang tugon na 200 na nagbabalik ng pahina ng pag-sign in ay hindi magagamit na larawan, at ang redirect patungo sa pahina ng error na HTML ay kamukha ng sirang file hanggang mabasa mo ang uri.
Basahin ang katayuan bago ang network
Ang pag-timeout, tinanggihang kahilingan at error sa pag-decode ay nangangailangan ng magkaibang susunod na hakbang, at ang status code ang naghihiwalay sa kanila. Ang timeout ay tumutukoy sa resolusyon ng pangalan, ruta o host na hindi tumutugon. Ang tinanggihang kahilingan ay tumutukoy sa patakaran o antas ng awtorisasyon. Ang error sa pag-decode ay tumutukoy sa mga byte o format.
Kung hindi lumilitaw ang kahilingan, itigil ang pagtingin sa network at tingnan ang markup. Ang pinakakaraniwang dahilan ay isang entry sa source set na mas pinili ng browser at wala na sa server, sinusundan ng elementong hindi kailanman ginawang nakikita ng script.
Ang pagkakaibang iyon lang ang pumipigil sa karamihan ng nasayang pagsisikap sa ganitong uri ng ulat.
Kapag hinahadlangan ito ng browser, walang tugon na mababasa
Ang pinaghalong nilalaman ang klasikong kaso: ang pahinang HTTPS na humihingi ng larawan sa simpleng HTTP ay hinaharangan ang kahilingan sa halip na mabigo, at itinatala ng console ang dahilan. Ang patakaran sa seguridad ng nilalaman ay gumagawa ng parehong hugis, na pinangalanan ang hinadlangang direktiba sa mensahe. Ang patakaran ng referrer na nag-aalis ng header ay maaari ring gawing magbalik ang host na protektado sa hotlink ng placeholder sa halip na ang larawan.
Basahin ang naitalang dahilan bago hawakan ang landas ng network, dahil hindi bumubuti ang mga harang na ito kapag nagbago ang ruta. Ang pagdaragdag ng cross-origin na pahintulot ay hindi rin ang solusyon: ang pagpapakita ng larawan mula sa ibang host at ang pagbasa ng mga pixel nito sa canvas ay magkaibang operasyon, at ang pangalawa lang ang nangangailangan ng mga header na idinidikit ng mga tao.
Para sa site na pinangangasiwaan mo, itama ang URL ng resource, ang tugon o ang patakaran sa may-ari nito at panatilihing buo ang mga pangangailangan sa awtorisasyon at referrer. Para sa site na hindi mo kontrolado, ipadala ang pahina at ang ebidensya ng kahilingan sa channel ng suporta nito sa halip na muling i-publish ang mga link ng pribado o nag-expire na resource.
Ihambing ang mga landas nang hindi binabago ang ebidensya
Kung talagang gusto mong subukan ang landas ng access, panatilihing pare-pareho ang lahat ng iba pa: parehong pahina, parehong account, parehong napiling larawan, isang pinapayagang landas na binago. Ihambing ang mga entry ng kahilingan nang magkatabi sa halip na ang na-render na resulta, dahil sinasabi ng na-render na resulta kung lumitaw ang larawan, hindi kung bakit.
Ang larawang naglo-load sa bagong ruta ay hindi nagpapatunay na awtorisado ang rutang iyon, at ang larawang nananatiling sira ay hindi nagpapatunay na ang tunnel ang may kasalanan. Kung inalis ang larawan o sadyang nilimitahan ang access, gumamit ng sinusuportahang alternatibo sa halip na patayin ang mga pagsusuri ng sertipiko o kopyahin ang protektadong materyal ng iba.
Pagkakasunod-sunod ng trabaho: tukuyin ang napiling URL, basahin ang katayuan at uri, tingnan kung may naitalang dahilan ng pagharang, pagkatapos ay ihambing ang isang pagbabago ng landas sa isang pagkakataon.