Error al cargar el recurso en Chrome

194

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?

AntonAL
fuente
¿Puedes mostrar algo de HTML? Necesitamos más información para ayudarlo con su problema.
Andre
1
La razón por la que establezco una recompensa por esta pregunta es que ocurre de vez en cuando y no está relacionada solo con imágenes. El sitio en el que estoy trabajando funciona bien en Firefox y ocasionalmente falla en Chrome.
1
¿Cómo has resuelto el problema?
maks
Compruebe si las extensiones de Google Chrome son solicitudes de bloqueo.
Samuel Edson

Respuestas:

280

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).

sarink
fuente
2
¡Si eso es! El mío tenía "Popup" en el nombre y esto estaba causando el problema.
Janik Zikovsky
Gracias. el sitio localhost estaba bien, una vez en una url en vivo apareció el problema, me hizo pensar ..
Sam Doidge
1
¡Gracias! Pasé más de 30 minutos tratando de descubrir por qué mi código no funcionaba en Chrome.
heyomi
2
Gracias por salvarme Tenía la palabra 'Ad' en mi url. Cuando lo eliminé, funcionó. Pero, ¿hay alguna solución para esto? Quiero decir, no quiero cambiar mi URL.
Amit
2
También tengo este problema, pero no tengo ninguna extensión instalada y ejecuto la versión más reciente, ¿qué hacer?
TheCrazyProfessor
31

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

ismail
fuente
2
@Cartman Pido disculpas por mi ignorancia. ¿Qué quieres decir con la pestaña Red?
Haga clic derecho en cualquier elemento de la página, seleccione "Inspeccionar elemento", se abrirá el "Inspector", el Inspector tiene muchas pestañas para depurar la página web, una de ellas es la pestaña "Red", haga clic, vuelva a cargar la página y verifique por cualquier error de red.
ismail
@Cartman - Gracias, uso mucho el inspector y no puedo encontrar la pestaña de red. Tengo elementos, recursos, scripts, perfil de línea de tiempo, almacenamiento, auditorías y consola. Buscaré en Google e intentaré entender por qué no tengo una pestaña de red.
1
Estoy usando Chromium 10.0.xx.xx, asegúrese de usar una instantánea reciente.
ismail
@Cartman - Gracias por la punta de cromo - no estaba al tanto de este proyecto. Versión instalada 10.0.621.0 (70119). Han recreado el problema. El mensaje en la pestaña Red es 16 solicitudes 0B transferidas. La consola indica: OBTENGA localhost: 51707 / Content / Theme.css undefined (undefined) Incluso pensó 20 segundos antes de recuperarlo sin ningún problema.
17

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.

nuri
fuente
Gracias por el consejo, estaba en la misma situación y tirando de mi cabello sobre cuál era la razón
jasalguero
Que lo que me pasó, Chrome no cargó archivos CSS debido a la extensión AdBlock, cuando cancelé la extensión todo funcionó bien.
Chani Poz
14

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é'.
john ktejik
fuente
¿podrías comprobar esto una vez? stackoverflow.com/questions/42693371/… @john ktejik
Yokesh Varadhan
Esto lo hizo por mi.
JayJay123
Con esto resolviendo un problema particular para mí. Solo lo hace para los desarrolladores. ¿Cómo tomo este conocimiento y lo lanzo a producción para que el usuario ya no experimente este problema? ¿Significa esto que el onclick que me está dando este error debería borrar el caché cada vez o algo por el estilo?
Stefano Martinengo
Me salvaste mucho tiempo. Probé su tuerca 1,2 y 4 no 4. Ahora marqué la casilla de verificación 'deshabilitar caché', hay muchas diferencias.
Hola
8

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.

jmorganmartin
fuente
Solo una razón más por la que adBlock no debería existir.
StephenKelzer el
2
adBlock debe existir y debe seguir viviendo
Coty Embry
7

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.

bcolin
fuente
4

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.

marcostrama
fuente
Lo mismo aquí ... En mi caso, fue Service Stack el que agregó Content-Length al serializar objetos, pero no Stream o Byte Array.
shex
De repente, el "+1" en la longitud del contenido comienza a causar "Encabezado de fragmento inválido" en mi comunicación con Tomcat (uso el puente php java para comunicar apache con tomcat). Eliminé este "+1" y funcionó normalmente en Chrome. El error con el fragmento desapareció también. Extraño problema ... No entiendo qué pasó.
marcostrama
3

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.

Tony Tambe
fuente
Para mí, este era el problema :)
Clindo
2

En Chrome (Canary) desmarqué la extensión "Appspector". Eso borró el error. ingrese la descripción de la imagen aquí

MannyC
fuente
1

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

Sergiu
fuente
0

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.

GHULAM NABI
fuente