Error al cargar el recurso en Chrome

Hay un montón de imágenes en una página web.

Otros navegadores los están descargando correctamente, pero Chrome no los carga.

En la consola del desarrollador, muestra el siguiente mensaje para cada imagen:

Error al cargar el recurso

Este problema solo aparece en Chrome.

¿Qué es?

Recientemente me encontré con este problema y descubrí que fue causado por la extensión “Adblock” (mi mejor versión es que tenía las palabras “banner” y “ad” en el nombre del archivo).

Como una prueba rápida para ver si ese es su problema, inicie Chrome en modo incógnito con extensiones deshabilitadas ( ctrl + shift + n ) y vea si su página funciona ahora. Tenga en cuenta que, de forma predeterminada, todas las extensiones ya estarán deshabilitadas en el modo incógnito a menos que las haya configurado específicamente para ejecutarse (a través de chrome://extensions ).

Compruebe la pestaña de red para ver si Chrome no pudo descargar ningún archivo de recursos.

En caso de que ayude a alguien, tuve exactamente este mismo problema y descubrí que fue causado por la extensión de Chrome “Do Not Track Plus” (versión 2.0.8). Cuando desactivé esa extensión, la imagen cargó sin error.

También existe la opción de desactivar la memoria caché para recursos de red. Esto podría ser mejor para entornos en desarrollo.

  1. Haga clic derecho en cromo
  2. Ir a ‘inspeccionar elemento’
  3. Busque la pestaña ‘red’ en algún lugar en la parte superior. Pinchalo.
  4. Marque la checkbox ‘desactivar caché’.

La solución de Kabir es correcta. Mi imagen URL fue

 /images/ads/homepage/small-banners01.png, 

y esto estaba tropezando con AdBlock. Este no fue un problema de dominio cruzado para mí, y falló en localhost y en la web.

Estaba usando la pestaña de red de Chrome para depurar y encontrar resultados muy confusos para estas imágenes específicas que no se pudieron cargar. La primera solicitud no devolvería ninguna respuesta (Estado “(pendiente)”). Más adelante en la línea, hubo una segunda solicitud que enumeró la URL original y luego “Redirigir” como el Iniciador. Los encabezados de solicitud de redireccionamiento eran todos para esta línea corta idéntica de datos codificados en base64, y cada uno no devolvía ninguna respuesta, aunque el estado era “Correcto”:

 GET data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg== HTTP/1.1 

Más tarde noté que estos estilos en línea se agregaron a todos los elementos de la imagen:

  display: none !important; visibility: hidden !important; opacity: 0 !important; 

Finalmente, no recibí ningún mensaje de “error al cargar recursos” en la consola, sino más bien esto:

 Port error: Could not establish connection. Receiving end does not exist. 

Si le sucede algo de esto, probablemente tenga algo que ver con AdBlock. Desactívelo y / o cambie el nombre de sus archivos de imagen.

Además, debido al CSS en línea creado por AdBlock, el diseño de mi deslizador de promociones estaba siendo descartado. Si bien pude solucionar los problemas de diseño con CSS antes de encontrar la solución de Kabir, el CSS era algo innecesario y afectó la flexibilidad del control deslizante para manejar imágenes de varios tamaños.

Supongo que la lección es: tenga cuidado con el nombre de sus imágenes. Estas imágenes no eran maliciosas ni molestas, sino que alertaron a los visitantes de las promociones actuales y especiales de una manera discreta.

Si las imágenes se generan a través de ASP Response.Write() , asegúrese de no llamar a Response.Close(); . A Chrome no le gusta.

Recibí este error, solo en Chrome (última versión 24.0.1312.57 m), y solo si la imagen era más grande que html img. Estaba usando un script php para mostrar la imagen así:

 header('Content-Length: '.strlen($data)); header("Content-type: image/{$ext}"); echo base64_decode($data); 

Lo resolví agregando 1 a la longitud de la imagen:

 header('Content-Length: '.strlen($data) + 1); header("Content-type: image/{$ext}"); echo base64_decode($data); 

Parece que Chrome no espera la cantidad correcta de bytes.

Probado con éxito en Chrome e IE 9. Espero esta ayuda.

Hay una solución temporal en el soporte de showModalDialog de Reenable (temporal) en Chrome (para Windows) 37+ .

Básicamente, crea una nueva cadena en el registro en

 HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures 

En la clave EnableDeprecatedWebPlatformFeatures, cree un valor de cadena con el nombre 1 y un valor de ShowModalDialog_EffectiveUntil20150430 . Para verificar que la política esté habilitada, visite chrome://policy URL.

FYI – Tuve este problema también y resultó que mi html incluía el archivo .jpg con un .JPG en mayúsculas, pero el archivo en sí era .jpg en minúsculas. Eso funcionó bien localmente y usando Codekit, pero cuando fue enviado a la web no se cargaba. Simplemente cambiando los nombres de los archivos para tener una extensión .jpg minúscula para que coincida con el html hizo el truco.

Hechos:

  • He desactivado todos los complementos, y el problema aún persiste.
  • Hay algunos sitios donde el problema no ocurre.
  • Es un problema conocido. Consulte el problema 424599: error al cargar el error de recurso: net :: ERR_CACHE_MISS al abrir DevTools en páginas PHP y la pregunta de desbordamiento de stack error extraño en la consola del desarrollador de Chrome: error al cargar el recurso: net :: ERR_CACHE_MISS .

En Chrome (Canary) desactivé la extensión “Appspector”. Eso borró el error. enter image description here

Actualicé mi navegador Chrome a la última versión y se solucionó el problema.