Por que falla unha imaxe mentres o resto da páxina carga
Tres condicións separan un fallo de rede dunha solicitude bloqueada e dun erro de representación. Atope o URL que escolleu o navegador antes de cambiar a ruta.
A páxina carga, o texto represéntase e unha imaxe queda como unha icona rota. A reacción inmediata é culpar o túnel, porque o túnel é o que cambiou. Antes diso, averigüe que URL pediu realmente o navegador para esa imaxe, porque o URL da páxina e o URL da imaxe son dúas probas diferentes. A maioría dos avisos de imaxe ausente resólvense nun host que nunca recibiu unha solicitude funcional, e esa resposta custa unha ollada ao panel Rede.
Tres condicións deciden onde mirar
A primeira condición é se a imaxe provén do mesmo host cá páxina. Un host de imaxes separado necesita a súa propia resolución de nomes, a súa propia conexión e a súa propia identidade TLS, así que unha páxina que carga non di nada sobre el.
A segunda é se o navegador bloqueou a solicitude antes de enviarla. O contido mixto, a política de seguridade de contido e as regras de referente poden deter unha imaxe sen producir unha resposta normal do servidor, por iso non aparece ningunha solicitude fallida na lista.
A terceira é se a entrega se completou e a representación fallou, un caso no que os bytes chegan e a imaxe segue sen aparecer. Esas tres condicións teñen tres donos distintos, e só a primeira é unha cuestión de rede.
| 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 |
Atope o recurso que o navegador escolleu realmente
O URL que ve no código fonte da páxina a miúdo non é o URL que se solicitou. Os conxuntos de orixes, os elementos picture e os fondos CSS permiten ao navegador escoller un recurso distinto segundo o ancho da ventá, a densidade de píxeles ou a compatibilidade de formato. Pode que unha imaxe de carga diferida non se solicite nada ata que a páxina acade un estado determinado.
Inspeccione o elemento e a solicitude xuntos, e conserve o iniciador coa solicitude cando informe do problema. A referencia do elemento de imaxe de MDN cobre a selección de orixe, o comportamento de carga e os controis de referente nun só lugar, o que abonda para saber que atributo escolleu o URL que falla.
Anote o nome de host, o estado, calquera cadea de redirección e o tipo de contido da resposta. Unha resposta 200 que devolve unha páxina de inicio de sesión non é unha imaxe utilizábel, e unha redirección a unha páxina de erro HTML parece idéntica a un ficheiro danado ata que le o tipo.
Lea o estado antes ca rede
Un tempo de espera esgotado, unha solicitude denegada e un erro de descodificación necesitan pasos seguintes distintos, e o código de estado é o que os separa. Un tempo de espera apunta á resolución de nomes, á ruta ou a un host que non responde. Unha solicitude denegada apunta a unha política ou a unha capa de autorización. Un erro de descodificación apunta aos bytes ou ao formato.
Se a solicitude non aparece nunca, deixe de mirar a rede e mire o marcado. A causa máis común é unha entrada dun conxunto de orixes que o navegador preferiu e que xa non existe no servidor, seguida dun elemento que ningún script fixo visíbel.
Só esa distinción evita a maior parte do esforzo desperdiciado neste tipo de avisos.
Cando o navegador o bloquea, non hai resposta que ler
O contido mixto é o caso clásico: unha páxina HTTPS que pide unha imaxe por HTTP simple recibe a solicitude bloqueada en lugar de fallida, e a consola rexistra o motivo. A política de seguridade de contido produce a mesma forma, coa directiva bloqueada indicada na mensaxe. Unha política de referente que elimina a cabeceira tamén pode facer que un host protexido contra hotlinking devolva un marcador de posición en lugar da imaxe.
Lea o motivo rexistrado antes de tocar a ruta de rede, porque estes bloqueos non melloran cando cambia a ruta. Engadir permisos de orixe cruzada tampouco é a solución: mostrar unha imaxe doutro host e ler os seus píxeles nun canvas son operacións distintas, e só a segunda necesita as cabeceiras que a xente pega.
Nun sitio que vostede administra, corrixa o URL do recurso, a resposta ou a política no seu propietario e manteña intactos os requisitos de autorización e de referente. Nun sitio que non controla, envíe a páxina e as probas da solicitude á súa canle de soporte en lugar de republicar ligazóns de recursos privados ou caducados.
Compare rutas sen cambiar as probas
Se quere probar a ruta de acceso, manteña todo o demais constante: mesma páxina, mesma conta, mesma imaxe seleccionada, unha ruta permitida cambiada. Compare as entradas de solicitude en paralelo en lugar do resultado representado, porque o resultado representado di se a imaxe apareceu, non por que.
Unha imaxe que carga nunha ruta nova non demostra que esa ruta estea autorizada, e unha imaxe que segue rota non demostra que o túnel teña a culpa. Se a imaxe se eliminou ou o acceso está restrinxido a propósito, use unha alternativa compatíbel en lugar de desactivar as comprobacións de certificado ou copiar material protexido alleo.
Orde de traballo: identifique o URL seleccionado, lea o seu estado e tipo, comprobe se hai un motivo de bloqueo rexistrado e despois compare un cambio de ruta á vez.