Imagens não aparecem e “Abrir imagem em nova guia” mostra about\:blank#blocked: diagnóstico e soluções definitivas

Se as imagens do seu site não aparecem e, ao abrir em nova guia, o navegador mostra about:blank#blocked, este guia reúne as causas mais comuns, um roteiro de diagnóstico em minutos (com DevTools) e correções práticas no código, servidor, CDN e ambiente do usuário.

Índice

Resumo rápido (para agir já)

Isolar o escopo: falha só no seu site → foco no código/servidor. Falha em vários sites → foco no navegador/rede.
Testar ambiente: outro navegador, janela anônima, perfil limpo e extensões desativadas. Se possível, outra rede.
DevTools → Network (Img): verifique Status, Request URL, Content-Type, CSP e erros no Console.
Top causas: conteúdo misto (HTTP em página HTTPS), CSP restritiva, hotlink protection, MIME incorreto com nosniff, data:/blob: sem URL pública, Service Worker desatualizado, bloqueio por ad‑blockers.
Rede/Windows: redefina stack de rede e proxy (comandos no fim), sem ativar protocolos legados.

Por que aparece `about:blank#blocked`?

O endereço especial about:blank#blocked é um placeholder usado pelos navegadores quando uma navegação ou recurso é bloqueado por políticas de segurança, extensões ou quando o item não tem uma URL HTTP(S) válida para abrir em aba separada (ex.: imagens em data: ou blob:). Em outras palavras: o navegador preferiu “não navegar” para a URL original e exibiu uma tela em branco com o sufixo #blocked para indicar o bloqueio.

Diagnóstico rápido com DevTools (Chrome/Edge/Firefox)

Aperte F12 → guia Network → filtro Img → recarregue a página.
Clique em cada imagem e confira:
- Status (200, 301/302, 403, 404, 415, 500…)
- Request URL (HTTP vs. HTTPS, domínio, caminho, sensibilidade a maiúsculas)
- Response Headers (Content-Type, Content-Security-Policy, X-Content-Type-Options, Cross-Origin-Resource-Policy, Access-Control-Allow-Origin)
- Preview (se não renderiza, veja o Headers e Response)
Abra a guia Console e procure por:
- Refused to load image (CSP/CORP/COEP)
- Mixed Content (HTTP em página HTTPS)
- ERRBLOCKEDBY_CLIENT (ad‑blockers/extensões)
- MIME type (‘text/html’) is not a supported image (tipo incorreto)
Teste a URL direta da imagem em uma nova aba:
- Se abre normalmente: culpa provável de CSP, hotlink, Service Worker, extensão ou nome de arquivo bloqueado.
- Se retorna 404/403/500 ou baixa um HTML: problema de rota/arquivo/permissão, política de hotlink ou rewrite.
Guia Security: confirme HTTPS válido, HSTS e alertas de conteúdo misto.
Guia Application → Service Workers: Unregister, Update, Clear storage e Hard reload.

Tabela de sintomas → verificações → correções

Sintoma	Verificação objetiva	Correção recomendada
Imagem some na página e “Abrir em nova guia” vira `about:blank#blocked`	Network: URL começa com `data:` ou `blob:`	Servir o arquivo em URL HTTP(S) pública; evitar `data:`/`blob:` quando o usuário precisa abrir em aba
Erro Mixed Content	Console: “Mixed Content: The page at ‘https://…’ was loaded over HTTPS, but requested an insecure image ‘http://…’”	Trocar para HTTPS, usar URLs relativas ou ativar redirect 301 para HTTPS
Carrega ao acessar direto, mas quebra embutido	Headers: CSP `img-src 'self'` ou CORP `same-origin`	Ajustar cabeçalhos para incluir as origens necessárias
403 ao abrir em nova aba	Servidor exige Referer ou cookie; hotlink protection ativo	Liberar acesso direto às imagens ou hospedar no mesmo domínio
Nada carrega; Console mostra ERRBLOCKEDBY_CLIENT	Lista de filtros/Extensões	Renomear pastas/arquivos (evitar `/ads/`, `banner`, `tracking`), orientar desativar extensão
Download de HTML em vez de imagem	Response `Content-Type: text/html` ou rota do framework respondendo HTML	Servir estático com MIME correto; bypass de rotas dinâmicas

Causas e soluções no lado do site (as mais comuns)

Conteúdo misto (HTTPS vs. HTTP)

Se a página está em https:// e a imagem em http://, o navegador tende a bloquear.

Como confirmar: mensagem de Mixed Content no Console.

Como resolver:

Troque as URLs para https:// ou use caminhos relativos (// protocol-relative só se o host também for HTTPS).
Ative redirecionamento 301 de HTTP para HTTPS no servidor/CDN.
Em CMS, corrija home/siteurl e faça um find/replace de URLs antigas no banco.

# Nginx — redirect global para HTTPS
server {
  listen 80;
  server_name exemplo.com www.exemplo.com;
  return 301 https://$host$request_uri;
}

Content Security Policy (CSP) bloqueando imagens

Uma política como Content-Security-Policy: img-src 'self' impede carregar imagens de CDNs/terceiros.

Como confirmar: Console com “Refused to load image … because it violates the following Content Security Policy directive: img-src …”.

Solução segura (ajuste ao seu caso):

# Base razoável permitindo HTTPS, data:, blob:
Content-Security-Policy: default-src 'self';
  img-src 'self' https: data: blob:;
  object-src 'none';
  frame-ancestors 'none';
  upgrade-insecure-requests;

Em servidores:

# Nginx
add_header Content-Security-Policy "default-src 'self'; img-src 'self' https: data: blob:; object-src 'none'; frame-ancestors 'none'; upgrade-insecure-requests" always;

Apache (.htaccess)

\
Header set Content-Security-Policy "default-src 'self'; img-src 'self' https: data: blob:; object-src 'none'; frame-ancestors 'none'; upgrade-insecure-requests"
\

URL inválida, 404/403 ou hotlink protection

Alguns servidores bloqueiam acesso direto quando não há Referer válido. “Abrir em nova guia” pode simular requisição sem Referer.

Correção: hospede as imagens no mesmo domínio, libere acesso direto ou restrinja por signed URLs com expiração (quando necessário). Ajuste caminhos com maiúsculas/minúsculas corretos.

# Nginx — exemplo simples de hotlink (ajuste com cuidado)
valid_referers none blocked exemplo.com *.exemplo.com;
if ($invalid_referer) {
  return 403;
}
Para não bloquear seu próprio domínio e crawlers legítimos, refine as regras.

Tipo MIME incorreto + `X-Content-Type-Options: nosniff`

Se a imagem é servida como text/html ou application/octet-stream, o navegador pode recusar.

Correção: envie Content-Type correto.

# Nginx
include mime.types;
types {
  image/avif avif;
  image/webp webp;
}
Apache
AddType image/webp .webp
AddType image/avif .avif
Node/Express
res.type('image/webp'); // ou o tipo correto detectado pelo arquivo

Imagens de Google Drive/Dropbox/Discord (links de visualização)

Links de “visualização” frequentemente não são finais (podem exigir cookie ou redirecionamento). Abrir em nova guia falha.

Correção: prefira links diretos, use uma CDN ou hospede os arquivos no próprio servidor estático.

URLs `data:` ou `blob:`

São úteis para pré-visualização ou quando o conteúdo nasce no cliente, mas “abrir em nova guia” costuma resultar em about:blank#blocked.

Correção: se o usuário precisa abrir/baixar a imagem, disponibilize uma URL HTTP(S) real para o arquivo.

Service Worker/Cache

Um Service Worker antigo pode responder à requisição de imagem com HTML ou 404 em cache.

Faça Hard reload e limpe armazenamento (Application → Clear storage).
Unregister o SW e publique uma versão nova (mude o cacheName e a lista de precache).
Garanta event.respondWith devolvendo a resposta com Content-Type correto.

// Exemplo (trecho) — garantir cabeçalho correto
self.addEventListener('fetch', event =&gt; {
  const url = new URL(event.request.url);
  if (url.pathname.endsWith('.webp')) {
    event.respondWith(fetch(event.request).then(r =&gt; {
      return new Response(r.body, {
        headers: {'Content-Type': 'image/webp'}
      });
    }));
  }
});

Bloqueio por extensões/Ad‑blockers

Caminhos como /ads/, /banner, /track disparam listas de bloqueio.

Correção: renomeie diretórios/arquivos, teste com extensões desativadas e crie regras de exceção no seu domínio.

Outras causas modernas (e como tratar)

Cross-Origin-Resource-Policy (CORP) e COEP

Se a imagem está em outro domínio e o servidor dela envia Cross-Origin-Resource-Policy: same-origin, a carga pode ser bloqueada.

Correção: no servidor da imagem, envie Cross-Origin-Resource-Policy: cross-origin (se for público) ou hospede no mesmo domínio.

# Nginx
add_header Cross-Origin-Resource-Policy "cross-origin" always;
Apache
Header set Cross-Origin-Resource-Policy "cross-origin"

Terceiros exigindo CORS quando a imagem vai para <canvas>

Para uso em <canvas>, defina crossorigin="anonymous" na <img> e sirva com Access-Control-Allow-Origin: * (ou o seu domínio).

&lt;img src="https://cdn.exemplo.com/img.webp" crossorigin="anonymous" /&gt;

Cookies e controle de acesso

Assinaturas de URL expiradas, verificações de sessão ou restrições a terceiros podem quebrar a entrega. Prefira tokens na query (signed URLs) para imagens em CDN ou libere o caminho de imagens de verificação de login.

Compressão e Content-Encoding errados

Não aplique gzip/br sobre formatos já comprimidos (PNG/JPEG/WebP/AVIF). Garanta que Content-Encoding corresponda ao corpo.

Formação de caminho e case sensitivity

Sistemas Linux tratam /Img/Logo.png diferente de /img/logo.png. Ajuste exatamente.

Procedimentos no navegador e no sistema

Testes no navegador

Abrir em janela anônima.
Desativar extensões (ex.: navegue em chrome://extensions ou edge://extensions e pause tudo).
Criar um perfil novo e testar.
Redefinir o navegador para padrões (sem alterar dados importantes, se possível faça backup).

Rede/Proxy (Windows)

Execute no Prompt (Admin) — cada linha individualmente:

ipconfig /release
ipconfig /renew
ipconfig /flushdns
ipconfig /registerdns
netsh int ip reset
netsh winsock reset
netsh winhttp reset proxy

Configurações da LAN → desmarque Proxy manual se não utiliza proxy corporativo.
Segurança: não habilite SSL 3.0/TLS 1.0/1.1; mantenha TLS 1.2+.

Outros sistemas

macOS (Terminal):

sudo dscacheutil -flushcache
sudo killall -HUP mDNSResponder
networksetup -setwebproxystate "Wi-Fi" off
networksetup -setsecurewebproxystate "Wi-Fi" off

Linux (varia por distro):

sudo systemd-resolve --flush-caches
sudo resolvectl flush-caches
Se usa proxy:
unset httpproxy httpsproxy HTTPPROXY HTTPSPROXY

Modelos prontos de cabeçalhos (baseline seguro)

Header	Valor sugerido	Observação
Content-Security-Policy	`default-src 'self'; img-src 'self' https: data: blob:; object-src 'none'; frame-ancestors 'none'; upgrade-insecure-requests`	Ajuste as origens reais que você usa
Cross-Origin-Resource-Policy	`cross-origin` (para imagens públicas)	Use `same-origin` se quiser isolar recursos
X-Content-Type-Options	`nosniff`	Exige Content-Type correto
Strict-Transport-Security	`max-age=31536000; includeSubDomains; preload`	Força HTTPS
Cache-Control (imagens)	`public, max-age=31536000, immutable`	Versão via hash no nome do arquivo

Exemplos de configuração por servidor

Nginx (estáticos e segurança)

server {
  listen 443 ssl http2;
  server_name cdn.exemplo.com;

Arquivos estáticos

location ~\* .(?\:png|jpe?g|gif|webp|avif|svg)\$ {
access\_log off;
add\_header Cache-Control "public, max-age=31536000, immutable";
add\_header X-Content-Type-Options "nosniff" always;
add\_header Content-Security-Policy "default-src 'self'; img-src 'self' https: data: blob:; object-src 'none'; frame-ancestors 'none'; upgrade-insecure-requests" always;
add\_header Cross-Origin-Resource-Policy "cross-origin" always;
try\_files \$uri =404;
}

Tipos adicionais

include mime.types;
types { image/avif avif; image/webp webp; }
}

Apache (.htaccess)

<IfModule mod_mime.c>
  AddType image/webp .webp
  AddType image/avif .avif
</IfModule>

\
Header set X-Content-Type-Options "nosniff"
Header set Cross-Origin-Resource-Policy "cross-origin"
Header set Content-Security-Policy "default-src 'self'; img-src 'self' https: data: blob:; object-src 'none'; frame-ancestors 'none'; upgrade-insecure-requests"
\

Cache (com versionamento no nome do arquivo)

\
Header set Cache-Control "public, max-age=31536000, immutable"
\

Node/Express

import express from 'express';
import path from 'path';

const app = express();
app.use('/img', express.static(path.join(process.cwd(), 'public/img'), {
setHeaders(res, filePath) {
if (filePath.endsWith('.webp')) res.setHeader('Content-Type', 'image/webp');
if (filePath.endsWith('.avif')) res.setHeader('Content-Type', 'image/avif');
res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
res.setHeader('X-Content-Type-Options', 'nosniff');
res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
res.setHeader('Content-Security-Policy',
"default-src 'self'; img-src 'self' https: data: blob:; object-src 'none'; frame-ancestors 'none'; upgrade-insecure-requests");
}
}));

Ferramentas de linha de comando para testar

# Ver status, redirecionamentos e tipo MIME
curl -I https://exemplo.com/img/logo.webp

Simular ausência de Referer (abrir em nova guia)

curl -I -H "Referer:" [https://exemplo.com/img/logo.webp](https://exemplo.com/img/logo.webp)

Validar CORS para uso em canvas

curl -I [https://cdn.exemplo.com/img/logo.webp](https://cdn.exemplo.com/img/logo.webp) | grep -i access-control

Baixar e inspecionar primeiros bytes (assinatura do formato)

curl -s [https://exemplo.com/img/logo.webp](https://exemplo.com/img/logo.webp) | head -c 12 | xxd

# PowerShell (Windows)
Invoke-WebRequest https://exemplo.com/img/logo.webp -Method Head | Select-Object StatusCode, Headers

Boas práticas de entrega de imagens

Use o elemento <picture> para fallback (ex.: AVIF/WebP → JPEG).
Versione arquivos no nome (logo.ab12cd.webp) e cacheie longo com immutable.
Sirva estáticos fora do roteador do framework (evita HTML por engano).
Evite caminhos e nomes que ativem filtros (ex.: /ads/).
Monitore o error log do servidor (403/404/415) e métricas de CDN.

FAQ rápida

“A imagem existe no servidor, por que 404?” — Caminho incorreto, case sensitivity, rewrite interceptando, deploy parcial ou CDN desatualizada.

“Ao abrir em nova guia, baixa o arquivo em vez de mostrar.” — Content-Disposition: attachment. Para exibir, use inline (ou remova o cabeçalho).

“Só alguns usuários reclamam.” — Extensões, DNS/proxy local, antivírus, política corporativa bloqueando data:/blob:.

“Funciona no HTTP, quebra no HTTPS.” — Links absolutos em HTTP, certificado inválido em subdomínio de imagens ou CSP que só lista http:.

Checklist final para corrigir rápido

[ ] Todas as imagens servidas por HTTPS.
[ ] CSP permite as origens necessárias em img-src (e data:/blob: se usados).
[ ] Sem hotlink protection impedindo acesso direto quando sem Referer.
[ ] Content-Type correto e sem nosniff aplicado de forma incompatível.
[ ] Pastas/arquivos com nomes neutros (sem gatilhos de ad‑block).
[ ] Service Worker atualizado/limpo e não respondendo HTML para imagens.
[ ] Ambiente de rede sem proxy/DNS problemático; pilha de rede resetada quando necessário.

Roteiro passo a passo sugerido

Teste em anônima/outro navegador → se falha só aí, olhe extensões/rede.
DevTools: identifique Status e Headers do recurso problemático.
Corrija o que aparecer primeiro: Mixed Content, CSP, hotlink, MIME, SW.
Valide a URL direta; se necessário, mova a imagem para o mesmo domínio.
Publique, limpe caches (navegador/CDN), e revalide com curl -I.

Conclusão: quando “Abrir imagem em nova guia” redireciona para about:blank#blocked, quase sempre há um bloqueio de política (CSP/CORP), uma URL não HTTP(S) (data:/blob:) ou um detalhe de entrega (MIME, hotlink, Service Worker). Com os passos e modelos acima, você identifica em minutos se a causa está no site (o cenário mais comum) ou no ambiente e aplica a correção definitiva.