Imágenes no se muestran y “about\:blank#blocked”: causas y soluciones definitivas

¿Imágenes que no aparecen y al abrirlas en una pestaña nueva ves about:blank#blocked? Esta guía te ayuda a detectar si es un fallo del navegador, de la red o de tu propio sitio, y te da pasos concretos para solucionarlo de forma rápida y segura.

Índice

Qué significa realmente `about:blank#blocked`

Ese identificador indica que el navegador impidió la navegación por motivos de seguridad. No es una página “real”: es un marcador que aparece cuando la carga se bloquea (p. ej., contenido mixto http/https, políticas de seguridad muy restrictivas, redirecciones sospechosas, extensiones que bloquean, hotlinking denegado o respuestas con tipo de contenido incorrecto). Por eso, aunque abras la imagen en una pestaña nueva, el navegador puede mostrar about:blank#blocked en lugar del recurso.

Idea clave: céntrate en tres frentes: origen de la imagen (ruta, dominio, protocolo), políticas de seguridad (CSP, CORP, cookies SameSite) y red/respuesta (códigos HTTP, cabeceras y redirecciones).

Diagnóstico rápido

A) Acota el problema (en menos de cinco minutos):

Comprueba si sucede solo en ese sitio o en todos. Visita otras webs con muchas imágenes. Si fallan todas, es más probable que sea un tema de red, navegador o un filtro local.
Prueba en otro navegador y en una ventana privada/incógnito. Desactiva todas las extensiones temporalmente (bloqueadores, antivirus web, gestores de contraseñas, VPN, proxy corporativo o parental).
Si continúa, restablece el navegador a su configuración predeterminada (en Chrome/Edge: Configuración → Restablecer; en Firefox: “Restablecer/Refrescar Firefox”).

Cuando parece un problema de sistema o red en Windows

B) Reinicia la pila de red (Símbolo del sistema como administrador) y reinicia el PC al terminar:

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

Revisa proxy y protocolos

Presiona Win + R, escribe inetcpl.cpl y acepta. Ve a Conexiones → Configuración de LAN y desmarca “Servidor proxy” si no lo usas. Si estás en una red corporativa, confirma con TI si el proxy es obligatorio.
En Opciones avanzadas, asegúrate de que TLS 1.2/1.3 estén activados. No actives SSL 3.0 (inseguro).
Verifica también en Configuración de Windows → Red e Internet → Proxy que no haya reglas inesperadas.

Descarta software de terceros

Realiza un inicio limpio (clean boot) deshabilitando servicios no Microsoft y programas de inicio. Prueba con un único navegador abierto.
Desactiva temporalmente filtrado de contenido en antivirus/antimalware, control parental, VPN y aceleradores de descarga que puedan interceptar conexiones.
Revisa el archivo hosts (C:\Windows\System32\drivers\etc\hosts) en busca de entradas que apunten dominios de tu web a IPs erróneas.
Comprueba fecha y hora del sistema. Un desfase grande invalida certificados TLS y puede bloquear recursos.

Diagnóstico de DNS y red doméstica

Reinicia el router/modem. Si estás tras un portal cautivo (wifi público), inicia sesión.
Como prueba temporal, configura DNS alternativos conocidos (por ejemplo, 1.1.1.1 o 8.8.8.8) para descartar problemas de resolución. Si mejora, el fallo estaba en tu DNS anterior.

Cuando el fallo es solo en tu sitio

Aquí es donde suelen aparecer las causas reales del “no se ve la imagen y al abrir sale about:blank#blocked”.

Rutas y archivos

Confirma que el src apunte al archivo correcto y exista en el servidor, respetando mayúsculas/minúsculas (en Linux son distintas) y usando barra normal / (no \).
Evita rutas relativas frágiles; para imágenes internas prefiere rutas absolutas desde raíz: <img src="/media/hero.jpg" alt="...">
Asegúrate de que la extensión se corresponda con el formato real. Un .jpg que en realidad es PNG puede provocar previsualizaciones vacías si además el servidor envía el tipo de contenido incorrecto.

Contenido mixto

Si tu página se sirve por https://, no intentes cargar imágenes por http://. Los navegadores modernos bloquean el contenido mixto y la navegación directa resultante puede ser interceptada, acabando en about:blank#blocked.

Soluciones:

Sirve todo por https://.
Habilita la directiva CSP upgrade-insecure-requests para que el navegador actualice automáticamente http→https cuando sea posible.
Elimina referencias absolutas http:// en tu HTML/CMS/plantillas.

Content-Security-Policy: upgrade-insecure-requests; img-src 'self' https: data: blob:;

Política de seguridad de contenidos (CSP)

Una CSP demasiado estricta puede impedir la carga de imágenes, o bloquear navegaciones iniciadas por la página. Revisa la cabecera Content-Security-Policy y la directiva img-src para incluir todos los orígenes legítimos.

Content-Security-Policy:
  default-src 'self';
  img-src 'self' https: data: blob: cdn.ejemplo.com *.trusted-static.com;
  object-src 'none';
  base-uri 'self';
  frame-ancestors 'none';
  upgrade-insecure-requests;
  report-to csp-endpoint; report-uri /csp-report;

Si usas imágenes en data: o blob:, inclúyelos explícitamente en img-src. Evita img-src 'none' o depender solo de default-src (imágenes no heredan de default-src si img-src está presente).

Anti‑hotlinking, redirecciones y referrer policy

Muchos sitios bloquean peticiones de imagen cuando el Referer proviene de otro dominio, o cuando no hay Referer (por ejemplo, si usas Referrer-Policy: no-referrer). Resultado: 302 hacia login/403 y, al abrir en pestaña nueva, el navegador corta la navegación.

Soluciones:

Permite tu dominio en las reglas anti-hotlink (y considera la ausencia de Referer como válida para evitar falsos positivos).
Si usas Referrer-Policy, prefiere strict-origin-when-cross-origin sobre no-referrer para mantener compatibilidad con CDNs que confían en ese encabezado.
Redirige las peticiones no válidas a una imagen placeholder image/* en lugar de HTML, para no romper previsualizaciones.

Ejemplo Nginx para anti‑hotlinking con lista blanca

location ~* \.(png|jpe?g|gif|webp|svg)$ {
  valid_referers none blocked *.tusitio.com tusitio.com;
  if ($invalid_referer) {
    return 403;
    # o: return 302 /media/placeholder.png;
  }
}

Ejemplo Apache (.htaccess) equivalente

RewriteEngine On
RewriteCond %{REQUEST_URI} \.(png|jpe?g|gif|webp|svg)$ [NC]
RewriteCond %{HTTP_REFERER} !^$ [OR]
RewriteCond %{HTTP_REFERER} !tusitio\.com [NC]
RewriteCond %{HTTP_REFERER} !\.tusitio\.com [NC]
RewriteRule . - [F]
o redirige a un placeholder en tu dominio

Cabeceras de respuesta correctas

El servidor debe devolver 200 OK con Content-Type: image/*. Evita responder HTML a una URL de imagen; el navegador podría bloquear la navegación.
Comprueba que no marques las imágenes como descarga forzada (Content-Disposition: attachment), salvo que sea intencionado.
Si sirves imágenes desde otro dominio, revisa Cross-Origin-Resource-Policy (CORP): same-origin o same-site pueden impedir su uso desde tu web. Para un CDN público, usa Cross-Origin-Resource-Policy: cross-origin (evalúa el riesgo).
Tipifica correctamente extensiones modernas: image/avif, image/webp, image/svg+xml.

Declaraciones de tipos en Nginx

types {
  image/avif  avif;
  image/webp  webp;
  image/svg+xml svg;
  image/jpeg  jpg jpeg;
  image/png   png;
}

Cookies, autenticación y `SameSite`

Si las imágenes requieren autenticación y se sirven en otro dominio (o subdominio), los navegadores pueden no enviar cookies por la política SameSite. Resultado típico: 302 a login o 401 para la URL de la imagen y, al “abrir en pestaña nueva”, navegación bloqueada.

Buenas prácticas:

No protejas imágenes estáticas con cookies. Usa un CDN y URLs firmadas con expiración si necesitas control de acceso.
Si de verdad necesitas cookies en otro dominio, marca las cookies como SameSite=None; Secure y sirve siempre por HTTPS.
Mantén imágenes y página bajo el mismo site para aprovechar SameSite=Lax sin fricción.

Service Worker y caché del sitio

Un Service Worker mal implementado puede entregar HTML en lugar de la imagen, o servir un recurso corrupto desde caché. Esto causa previsualizaciones vacías y bloqueos en la navegación directa.

Abre DevTools → Application → Service Workers y pulsa Unregister temporalmente.
En Application → Clear storage, marca borrar cachés, almacenamiento y datos del sitio. En Network, activa Disable cache y recarga.
Revisa tu fetch handler para no capturar solicitudes de image/* si no gestionas bien sus respuestas.

CDN, invalidación y huellas de archivos

Si usas CDN, invalida el recurso tras una subida. Un edge con archivo corrupto puede devolver 200 con Content-Type: text/html en errores y confundir al navegador.
Usa fingerprinting (p. ej., hero.9f2c1d4.jpg) para evitar servir versiones antiguas desde caché intermedia.

Prueba directa de una imagen

“Copia dirección de imagen”, pégala en la barra de direcciones y observa el resultado. Si sigue sin cargar:

Abre DevTools → Network, marca Preserve log y recarga.
Filtra por Img y selecciona el recurso fallido.
Lee Status, Type, Initiator, Preview y Headers. Si ves redirecciones a login/403 o MIME type mismatch, ya tienes la pista.

Comprobaciones con línea de comandos

Windows PowerShell:

iwr -Uri "https://tusitio.com/media/ejemplo.jpg" -Method GET -MaximumRedirection 10 -Headers @{"User-Agent"="Diag";"Accept"="image/*"} -OutFile "$env:TEMP\ejemplo.jpg"
iwr -Uri "https://tusitio.com/media/ejemplo.jpg" -Method HEAD -MaximumRedirection 0 -Headers @{"Accept"="image/"} | Format-List

curl (Windows/macOS/Linux):

curl -I -L "https://tusitio.com/media/ejemplo.jpg"
curl -v "https://tusitio.com/media/ejemplo.jpg" --output /dev/null

Guía de solución por síntomas

Síntoma	Qué verás en DevTools	Causa probable	Solución
Imagen no aparece, “Open in new tab” muestra `about:blank#blocked`	Mensaje blocked:mixed-content o solicitud marcada como insegura	Contenido mixto (página en HTTPS, imagen en HTTP)	Servir todo en HTTPS; añadir `upgrade-insecure-requests`; corregir rutas.
Imagen sustituida por vacío	200 OK, `Content-Type: text/html`, Preview muestra una página de login	Redirección a login por cookies no enviadas (`SameSite`) o ruta protegida	No proteger estáticos con sesión; si es inevitable, `SameSite=None; Secure` y mismo sitio.
Error al cargar con un CDN	403/404 desde cdn.ejemplo.com	Anti‑hotlinking o clave/URL vencida	Lista blanca del dominio; usar URLs firmadas; evitar depender de Referer estricto.
Carga funciona en el mismo dominio, falla en otro	Solicitud bloqueada sin llegar al servidor	`Cross-Origin-Resource-Policy: same-origin/same-site`	Ajustar a `cross-origin` en imágenes públicas o servir desde el mismo sitio.
Solo falla con ciertas extensiones	net::ERRBLOCKEDBY_CLIENT	Bloqueadores de anuncios/privacidad filtrando dominios o rutas	Renombra rutas sensibles (`/ads/`, `/track/`), mueve imágenes a un subdominio limpio.
SVG no se ve, PNG/JPG sí	`Content-Type: text/plain` o `text/html`	MIME incorrecto para SVG	Servir como `image/svg+xml`; tipificar el tipo en el servidor.
Algunas imágenes aparecen en local pero no en producción	404 en archivos con mayúsculas	Diferencias de mayúsculas/minúsculas del sistema de archivos	Estándar de nombres consistente; automatiza comprobación en CI.
Imágenes grandes fallan intermitentemente	Conexión reiniciada, ERRCONTENTLENGTH_MISMATCH	Corte en proxy o servidor; `Content-Length` o compresión mal calculada	Desactiva compresión doble, revisa `gzip/br`, usa `Accept-Ranges`.

Buenas prácticas rápidas para desarrolladores

Mantén un dominio limpio de estáticos (sin cookies) y en HTTPS con certificados válidos.
Configura CSP mínima segura: autoriza solo lo necesario para img-src; añade report-uri/report-to a un endpoint propio para recibir informes.
Evita rutas con palabras clave bloqueadas por adblockers (/ads/, /banners/, /tracking/).
Habilita formatos modernos (AVIF/WebP) con fallback a JPEG/PNG mediante <picture>.
Prueba con “Desactivar caché” en DevTools y con un usuario no autenticado.
Automatiza en CI una verificación de MIME y existencia de cada imagen referenciada desde el HTML.

Procedimiento paso a paso recomendado

Reproduce el fallo en incógnito y sin extensiones. Si desaparece, el problema es una extensión o configuración del perfil.
Revisa Network en DevTools: filtra Img, observa estado, tipo MIME y redirecciones. Haz captura.
Abre la URL de imagen directamente y observa si responde con 200 image/* o con 3xx/4xx/HTML.
Corrige la causa siguiendo la tabla de síntomas (CSP, Mixed content, hotlinking, cookies, CORP, MIME).
Purga cachés (CDN, Service Worker, navegador) y valida con una red diferente.

Plantillas útiles

CSP de partida amigable con imágenes

Content-Security-Policy:
  default-src 'self';
  img-src 'self' https: data: blob: cdn.tusitio.com *.tucdn.net;
  media-src 'self' https:;
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  upgrade-insecure-requests;

Encabezados de seguridad y compatibilidad para recursos estáticos

# Nginx: ubicación para estáticos
location ~* \.(?:avif|webp|png|jpe?g|gif|svg)$ {
  add_header Content-Security-Policy "img-src 'self' https: data: blob:" always;
  add_header Cross-Origin-Resource-Policy "cross-origin" always; # si realmente necesitas uso cross-site
  add_header Cache-Control "public, max-age=31536000, immutable";
  try_files $uri =404;
}

Qué datos aportar si necesitas más ayuda

D) Incluye siempre:

La URL exacta de una imagen que falle.
Capturas de Consola y Network donde se vean estado HTTP, redirecciones, cabeceras y posibles violaciones de CSP.
Resultado de pruebas en otro navegador/incógnito y tras desactivar extensiones.
Si hay CDN/proxy, indica cuál y si hay reglas de hotlinking/antibots.
Si usas Service Worker, di cómo cacheas imágenes.

Preguntas frecuentes

¿Por qué sale `about:blank#blocked` en vez de la imagen?

Porque el navegador decidió no navegar a la URL final. Generalmente hay una redirección o respuesta que considera insegura o impropia (HTML en lugar de imagen, contenido mixto, política de seguridad, bloqueo por extensión o un 30x hacia login).

¿Es peligroso?

No necesariamente. Es una medida preventiva. Lo importante es identificar qué política o condición disparó el bloqueo para permitir solo lo legítimo.

¿Cómo lo detecto en DevTools?

En Network, busca el recurso, mira el Initiator y el Preview. Si el Preview muestra una página HTML, el servidor no envió un image/*. Si ves blocked:mixed-content o una violación de CSP, corrige la configuración.

¿Puede ser culpa del tema o plugin del CMS?

Sí. Temas/plugins que reescriben URLs, añaden Service Workers, cambian CSP o insertan proxies de imagen pueden romper rutas o tipos MIME. Desactiva temporalmente el plugin que gestiona optimización de imágenes, lazy loading extremo o CDNs integrados, y valida.

¿Y si solo falla en un equipo concreto?

Entonces mira red local, filtros, extensiones y la pila de red de Windows. Ejecuta los comandos de restablecimiento, revisa proxy/TLS y, si persiste, prueba con otro usuario de Windows o perfil limpio del navegador.

Resumen accionable

Si pasa en muchos sitios: incógnito + sin extensiones, resetea navegador, restablece red con los comandos indicados, revisa proxy/TLS.
Si pasa solo en tu web: corrige HTTPS, CSP (img-src), CORP, hotlinking, cookies/SameSite, MIME y Service Worker.
Valida con DevTools: la imagen debe responder 200 y Content-Type: image/*. Cualquier 30x/40x/HTML es una pista.

Anexo: instrucciones concentradas

Acciones inmediatas para usuarios

Probar otra red (datos móviles) para descartar ISP/Firewall.
Restablecer navegador y limpiar datos del sitio concreto.
Desactivar temporalmente antivirus web y VPN para aislar el origen.

Acciones inmediatas para administradores del sitio

Buscar en logs del servidor la ruta exacta de la imagen y los códigos devueltos.
Verificar que el CDN no devuelve HTML en errores de backend.
Inspeccionar reglas de reescritura que puedan atrapar /*.jpg y redirigir a controladores HTML.
Subir una imagen “limpia” directamente a /media/test.jpg y enlazarla desde una página de prueba sin plugins/temas para aislar el CMS.

Ejemplo de página de prueba mínima

&lt;!doctype html&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;Prueba de imagen&lt;/title&gt;
&lt;!-- CSP solo para esta página --&gt;
&lt;meta http-equiv="Content-Security-Policy"
      content="default-src 'none'; img-src 'self' data: https:; upgrade-insecure-requests"&gt;
&lt;h1&gt;Imagen local&lt;/h1&gt;
&lt;img src="/media/test.jpg" alt="Test" width="600"&gt;
&lt;h1&gt;Imagen CDN&lt;/h1&gt;
&lt;img src="https://cdn.tusitio.com/media/test.jpg" alt="Test CDN" width="600"&gt;

Nota útil:about:blank#blocked es la forma en que el navegador te dice “he bloqueado esta navegación por seguridad”. En la práctica, la solución suele hallarse revisando el origen de la imagen, las redirecciones y las políticas de seguridad que aplican a tu página.

Todo en uno: checklist final

✔ HTTPS en página y recursos; sin mixtos.
✔ img-src en CSP incluye tus dominios, https:, data: y blob: si aplica.
✔ Sin bloqueo anti‑hotlink para tu propio dominio y contempla ausencia de Referer.
✔ Content-Type correcto para cada formato, sin HTML en URLs de imágenes.
✔ Cookies no necesarias para estáticos; si las usas entre sitios: SameSite=None; Secure.
✔ Sin extensiones bloqueando; prueba en incógnito.
✔ Pila de red de Windows reseteada y proxy revisado si afecta a muchos sitios.
✔ Service Worker desregistrado temporalmente y cachés purgadas.
✔ CDN con invalidación hecha y sin respuestas HTML en errores de origen.

Comandos de red para Windows (ejecuta como administrador y reinicia el equipo al terminar):

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

Configuraciones a revisar:

Proxy: inetcpl.cpl → Conexiones → Configuración de LAN → desmarcar “Servidor proxy” si no procede.
TLS: Habilitar TLS 1.2/1.3. No activar SSL 3.0.
Inicio limpio: arranque con servicios de terceros deshabilitados para descartar interferencias.

Con estos pasos, deberías poder identificar la causa exacta y resolver los casos de imágenes que no se muestran y que al abrir en una nueva pestaña terminan en about:blank#blocked, tanto si eres usuario como si administras el sitio.