Falha ao carregar o recurso no Chrome

194

Há várias imagens em uma página da web.

Outros navegadores estão baixando-os corretamente, mas o Chrome não os carrega.

No console do desenvolvedor, ele mostra a seguinte mensagem para cada imagem:

falha ao carregar recurso

Este problema aparece apenas no Chrome.

O que é isso?

AntonAL
fonte
Você pode mostrar um pouco de HTML? Precisamos de mais informações para ajudá-lo com seu problema.
25410 Andre
1
A razão pela qual eu recompensei essa pergunta é que ela ocorre de tempos em tempos e não está relacionada apenas a imagens. O site em que estou trabalhando funciona bem no Firefox e falha ocasionalmente no Chrome.
1
Como você resolveu o problema?
maks
Verifique se as extensões do Google Chrome estão bloqueando solicitações.
Samuel Edson

Respostas:

280

Recentemente, deparei com esse problema e descobri que ele era causado pela extensão "Adblock" (meu melhor palpite é que eu tinha as palavras "banner" e "anúncio" no nome do arquivo).

Como um teste rápido para verificar se esse é o seu problema, inicie o Chrome no modo de navegação anônima com as extensões desativadas ( ctrl+ shift+n ) e veja se sua página funciona agora. Observe que, por padrão, todas as extensões já estarão desabilitadas no modo de navegação anônima, a menos que você as tenha definido especificamente para execução (via chrome://extensions).

sarink
fonte
2
Sim é isso! O meu tinha "Popup" no nome e isso estava causando o problema.
Janik Zikovsky
Obrigado. localhost local estava bem, uma vez em uma url ao vivo a questão apareceu, tinha-me pensar ..
Sam Doidge
1
Obrigado! Passei mais de 30 minutos tentando descobrir por que meu código não funcionou no Chrome.
heyomi 23/05
2
Obrigado por me salvar. Eu tinha a palavra 'Ad' no meu URL. Quando eu removi, funcionou. Mas, existe alguma solução alternativa para isso? Quero dizer, não quero mudar meu URL.
Amit
2
Também tenho esse problema, mas não tenho nenhuma extensão instalada e executando a versão mais recente, o que fazer?
TheCrazyProfessor
31

Verifique a guia de rede para ver se o Chrome falhou ao baixar qualquer arquivo de recurso.

ismail
fonte
2
@ Cartman Peço desculpas pela minha ignorância. O que você quer dizer com guia Rede?
Clique com o botão direito do mouse em qualquer elemento da página, selecione "Inspecionar elemento", ele abrirá o "Inspetor", o Inspetor possui várias guias para depuração da página da web, uma delas é a guia "Rede", clique nela, recarregue a página e verifique por qualquer erro de rede.
Ismail
@ Cartman - Obrigado, eu uso muito o inspetor e não consigo encontrar a guia de rede. Eu tenho elementos, recursos, scripts, perfil da linha do tempo, armazenamento, auditorias e console. Vou pesquisar no Google e tentar entender por que não tenho uma guia de rede.
1
Estou usando o Chromium 10.0.xx.xx, certifique-se de usar um instantâneo recente.
Ismail
@ Cartman - Obrigado pela dica de cromo - não estava ciente deste projeto. Versão instalada 10.0.621.0 (70119). Recriaram o problema. A mensagem na guia Rede é de 16 solicitações 0B transferidas. O console está informando: GET localhost: 51707 / Content / Theme.css undefined (undefined) Até pensei 20 segundos antes de buscá-lo sem nenhum problema.
17

Caso isso ajude alguém, tive exatamente o mesmo problema e descobri que foi causado pela extensão do Chrome "Não rastrear mais" (versão 2.0.8). Quando desativei essa extensão, a imagem foi carregada sem erros.

nuri
fonte
Obrigado pela dica, eu estava na mesma situação e puxando meu cabelo sobre o que era a razão
jasalguero
Foi o que aconteceu comigo: o Chrome não carregou arquivos CSS por causa da extensão do AdBlock, quando eu cancelei a extensão, tudo funcionou bem.
Chani Poz 31/01
14

Também há a opção de desativar o cache para recursos de rede. Isso pode ser melhor para ambientes de desenvolvimento.

  1. Clique com o botão direito do mouse em chrome
  2. Vá para 'inspecionar elemento'
  3. Procure a guia 'rede' em algum lugar no topo. Clique.
  4. Marque a caixa de seleção 'desativar cache'.
john ktejik
fonte
u poderia verificar isso uma vez stackoverflow.com/questions/42693371/... @ John ktejik
Yokesh Varadhan
Isso fez por mim.
JayJay123
Com isso resolvendo um problema específico para mim. Faz isso apenas para os desenvolvedores. Como tomo esse conhecimento e o libero em produção para que o usuário não tenha mais esse problema. Isso significa apenas que o onclick que está me dando esse erro deve limpar o cache a cada vez ou algo nesse sentido?
Stefano Martinengo
Você me salvou muito tempo. Eu tentei sua porca 1,2 e 4 e não 4. Agora, marquei a caixa de seleção 'desativar cache', há muitas diferenças.
Olá
8

A solução de Kabir está correta. O URL da minha imagem era

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

e isso estava atrapalhando o AdBlock. Este não foi um problema entre domínios para mim e falhou no host local e na web.

Eu estava usando a guia de rede do Chrome para depurar e encontrando resultados muito confusos para essas imagens específicas que não foram carregadas. A primeira solicitação não retornaria resposta (Status "(pendente)"). Posteriormente, houve uma segunda solicitação que listou o URL original e, em seguida, "Redirecionar" como Iniciador. Os cabeçalhos da solicitação de redirecionamento eram todos para essa linha curta idêntica de dados codificados em base64 e cada um deles não retornou resposta, embora o status fosse "Bem-sucedido":

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

Mais tarde, notei que esses estilos embutidos foram adicionados a todos os elementos da imagem:

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

Por fim, não recebi nenhuma mensagem "falha ao carregar o recurso" no console, mas sim:

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

Se alguma dessas coisas estiver acontecendo com você, provavelmente isso tem algo a ver com o AdBlock. Desligue-o e / ou renomeie seus arquivos de imagem.

Além disso, devido ao CSS embutido criado pelo AdBlock, o layout do meu controle deslizante de promoções estava sendo descartado. Enquanto eu era capaz de corrigir os problemas de layout com o CSS antes de encontrar a solução do Kabir, o CSS era um tanto desnecessário e afetava a flexibilidade do controle deslizante para lidar com imagens de vários tamanhos.

Acho que a lição é: Cuidado com o nome das suas imagens. Essas imagens não eram maliciosas ou irritantes, mas alertavam os visitantes sobre promoções e promoções atuais de uma maneira discreta.

jmorganmartin
fonte
Apenas mais uma razão pela qual o adBlock não deveria existir.
StephenKelzer
2
O adBlock deve existir e deve permanecer
Coty Embry
7

Se as imagens são geradas por meio de um ASP Response.Write(), certifique-se de não ligar Response.Close();. O Chrome não gosta.

bcolin
fonte
4

Eu estava recebendo esse erro, apenas no Chrome (última versão 24.0.1312.57 m) e apenas se a imagem fosse maior que o html img. Eu estava usando um script php para gerar a imagem assim:

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

Resolvi adicionando 1 ao comprimento da imagem:

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

Parece que o Chrome não espera o número correto de bytes.

Testado com sucesso no Chrome e IE 9. Espero que ajude.

marcostrama
fonte
O mesmo aqui. No meu caso, foi a Pilha de Serviço que adiciona o Conteúdo ao Comprimento ao serializar Objetos, mas não uma Matriz de Fluxo ou Byte.
Shex
De repente, o "+1" no comprimento do conteúdo começa a causar "Invalid Chunk Header" em minha comunicação com o Tomcat (eu uso o php java bridge para comunicar o apache com o tomcat). Eu removi este "+1" e ele passou a funcionar normalmente no Chrome. O erro com pedaço também desapareceu. Problema estranho ... Eu não entendo o que aconteceu.
Marcostrama
3

Para sua informação, eu também tinha esse problema e meu html listou o arquivo .jpg com um .JPG em maiúsculas, mas o arquivo em si era minúsculo .jpg. Isso ficou bom localmente e usando o Codekit, mas quando foi enviado à Web, não foi carregado. Simplesmente alterar os nomes dos arquivos para ter uma extensão .jpg em minúsculas para corresponder ao html.

Tony Tambe
fonte
Para mim, este foi o problema :)
Clindo
2

No Chrome (Canário), desmarquei a extensão "Appspector". Isso resolveu o erro. insira a descrição da imagem aqui

MannyC
fonte
1

Atualizei meu navegador Chrome para a versão mais recente e o problema foi corrigido.

Sergiu
fonte
0

Quando os nomes dos arquivos do projeto contêm palavras como 'ad', os bloqueadores de anúncios também bloqueiam esses arquivos a serem carregados.

A melhor solução é que nunca salve nenhum arquivo com essas chaves de nome.

GHULAM NABI
fonte