Falha ao carregar o recurso no Chrome

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?

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

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

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.

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

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.

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.

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.

Fatos:

• Desativei todos os plugins e o problema ainda permanece.
• Existem alguns sites em que o problema não ocorre.
• É um problema conhecido. Consulte o Problema 424599: Falha ao carregar o recurso: erro net :: ERR_CACHE_MISS ao abrir o DevTools nas páginas PHP e a Pergunta de estouro de pilha pergunta Erro bizarro no Chrome Developer Console - Falha ao carregar o recurso: net :: ERR_CACHE_MISS .

Há uma solução temporária no suporte ao showModalDialog da Reenable (temporário) no Chrome (para Windows) .

Basicamente, crie uma nova sequência no registro em

HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\EnableDeprecatedWebPlatformFeatures

Sob a chave EnableDeprecatedWebPlatformFeatures, crie um valor de sequência com o nome 1e um valor de ShowModalDialog_EffectiveUntil20150430. Para verificar se a política está ativada, visite chrome://policyURL.

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.

No Chrome (Canário), desmarquei a extensão "Appspector". Isso resolveu o erro.

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

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.