Error al cargar el recurso en Chrome

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

Otros navegadores los descargan 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 suposición es que es porque tenía las palabras "banner" y "ad" en el nombre del archivo).

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

Verifique 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 el mismo problema y descubrí que fue causado por la extensión de Chrome "Do Not Track Plus" (versión 2.0.8). Cuando deshabilité esa extensión, la imagen se cargó sin error.

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

1. Haz clic derecho en Chrome
2. Vaya a 'inspeccionar elemento'
3. Busque la pestaña 'red' en algún lugar en la parte superior. Pinchalo.
4. Marque la casilla de verificación 'deshabilitar caché'.

La solución de Kabir es correcta. La URL de mi imagen era

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

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

Estaba usando la pestaña de red de Chrome para depurar y encontré 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 enumeraba la URL original y luego "Redirigir" como el Iniciador. Los encabezados de solicitud de redireccionamiento fueron todos para esta línea corta idéntica de datos codificados en base64, y cada uno no devolvió respuesta, aunque el estado era "Exitoso":

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 el recurso" en la consola, sino más bien esto:

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

Si alguna de estas cosas te está sucediendo, probablemente tenga algo que ver con AdBlock. Apáguelo y / o cambie el nombre de sus archivos de imagen.

Además, debido al CSS en línea creado por AdBlock, el diseño del control deslizante de mis promociones se estaba descartando. Si bien pude solucionar los problemas de diseño con CSS antes de encontrar la solución de Kabir, el CSS fue 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, ya que alertaban a los visitantes sobre las promociones y especiales actuales de una manera discreta.

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

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

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 que esta ayuda.

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 recurso: net :: ERR_CACHE_MISS al abrir DevTools en las páginas PHP y la pregunta de desbordamiento de pila Error extraño en la Consola del desarrollador de Chrome - Error al cargar el recurso: net :: ERR_CACHE_MISS .

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

Básicamente, cree 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 1y un valor de ShowModalDialog_EffectiveUntil20150430. Para verificar que la política esté habilitada, visite chrome://policyURL.

FYI: también tuve este problema y resultó que mi html enumeraba el archivo .jpg con un .JPG en mayúsculas, pero el archivo en sí era minúscula .jpg. Eso funcionó bien localmente y con Codekit, pero cuando se introdujo en la web no se cargó. Simplemente cambiar los nombres de los archivos para que tengan una extensión .jpg en minúscula para que coincida con el html hizo el truco.

En Chrome (Canary) desmarqué la extensión "Appspector". Eso borró el error.

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

Se debe al bloqueador de anuncios. Cuando los nombres de los archivos del proyecto contienen palabras como 'ad', los bloqueadores de anuncios también bloquean estos archivos para cargarlos.

La mejor solución es que nunca guarde ningún archivo con estas claves de nombre.