Valor incorrecto X para el atributo “src” en el elemento “img”: Carácter ilegal en la consulta

Las URLs siguen una sintaxis estricta definida por el URL Living Standard y RFC 3986. Solo un conjunto específico de caracteres pueden aparecer literalmente en la cadena de consulta de una URL. Los caracteres fuera de este conjunto — como pipes, corchetes cuadrados, llaves y ciertos otros símbolos — deben codificarse con porcentaje. La codificación con porcentaje reemplaza el carácter con un signo % seguido de su código ASCII hexadecimal de dos dígitos.

Cuando el validador HTML del W3C encuentra una etiqueta <img> cuyo atributo src contiene un carácter ilegal en la porción de consulta de la URL, genera este error. La cadena de consulta es la parte de la URL que viene después del carácter ?.

Por qué esto importa

• Inconsistencia del navegador: Aunque muchos navegadores modernos corregirán silenciosamente URLs malformadas, no todos los navegadores o clientes HTTP manejan los caracteres ilegales de la misma manera. Algunos pueden malinterpretar la URL o fallar completamente al cargar el recurso.
• Cumplimiento de estándares: Las URLs válidas son un requisito fundamental para el contenido web interoperable. Usar caracteres ilegales viola tanto las especificaciones HTML como URL.
• Interoperabilidad: Las herramientas automatizadas, rastreadores web, proxies y redes de entrega de contenido pueden rechazar o corromper URLs que contienen caracteres especiales no codificados, llevando a imágenes rotas.
• Accesibilidad: Los lectores de pantalla y tecnologías asistivas dependen de marcado válido. Las URLs malformadas pueden causar comportamiento inesperado en estas herramientas.

Caracteres ilegales comunes y sus codificaciones

Aquí hay caracteres frecuentemente marcados por el validador:

Cómo solucionarlo

Identifica los caracteres ilegales en la URL src y reemplaza cada uno con su valor correspondiente codificado en porcentaje. Si estás generando URLs dinámicamente con un lenguaje de programación, usa la función de codificación URL incorporada del lenguaje (ej. encodeURI() o encodeURIComponent() en JavaScript, urlencode() en PHP, urllib.parse.quote() en Python).

Ejemplos

❌ Incorrecto: carácter pipe sin codificar en la cadena de consulta

<img src="https://example.com/image?filter=red|blue" alt="Filtered image">

El carácter | no está permitido literalmente en la cadena de consulta.

✅ Correcto: carácter pipe codificado en porcentaje

<img src="https://example.com/image?filter=red%7Cblue" alt="Filtered image">

❌ Incorrecto: corchetes cuadrados sin codificar en la cadena de consulta

<img src="https://example.com/image?size[width]=300&size[height]=200" alt="Resized image">

Los caracteres [ y ] deben ser codificados.

✅ Correcto: corchetes cuadrados codificados en porcentaje

<img src="https://example.com/image?size%5Bwidth%5D=300&size%5Bheight%5D=200" alt="Resized image">

❌ Incorrecto: espacio en la cadena de consulta

<img src="https://example.com/image?caption=hello world" alt="Captioned image">

✅ Correcto: espacio codificado en porcentaje

<img src="https://example.com/image?caption=hello%20world" alt="Captioned image">

Codificar URLs dinámicamente

Si tus URLs se construyen en JavaScript, usa encodeURIComponent() para valores individuales de parámetros de consulta:

const filter = "red|blue";
const url = `https://example.com/image?filter=${encodeURIComponent(filter)}`;
// Resultado: "https://example.com/image?filter=red%7Cblue"

Esto asegura que cualquier carácter especial en valores proporcionados por el usuario o dinámicos se codifique apropiadamente antes de ser colocado en el HTML.

Más información:

MDN Reference

HTML img element - src attribute

→

WHATWG Spec

URL Living Standard

→

web.dev Article

HTML images

→