Valor incorrecto para el atributo “src” en el elemento “img”: Carácter ilegal en el esquema de datos: “<” no está permitido.

El validador HTML del W3C genera este error cuando el atributo src de un elemento <img> contiene caracteres que no están permitidos en una URI válida. El culpable más común es el carácter <, pero otros caracteres como >, {, }, |, \, ^, y las comillas invertidas también son ilegales en las URIs según RFC 3986.

Este problema suele ocurrir en algunos escenarios comunes:

• Sintaxis de plantilla sin resolver: Las etiquetas de plantilla del lado del servidor o del cliente (por ejemplo, <%= imageUrl %>, {{ image.src }}) aparecen literalmente en la salida HTML en lugar de ser procesadas en URLs reales.
• Errores de copiar y pegar: El marcado HTML o los corchetes angulares terminan accidentalmente dentro de un valor src.
• URLs dinámicas malformadas: JavaScript o código del lado del servidor construye incorrectamente una URL que incluye HTML crudo o caracteres especiales.

Esto es importante porque los navegadores pueden fallar al cargar la imagen o interpretar la URL de manera impredecible. Las URIs inválidas también pueden causar problemas con los lectores de pantalla y las tecnologías de asistencia que intentan resolver el src para proporcionar contexto sobre la imagen. Mantener tu marcado conforme a los estándares asegura un comportamiento consistente en todos los navegadores y entornos.

Cómo solucionarlo

1. Revisa las etiquetas de plantilla sin procesar. Si ves sintaxis de plantilla como <%, {{, o similar en el HTML renderizado, asegúrate de que tu motor de plantillas esté funcionando correctamente y generando la URL resuelta.
2. Usa URLs válidas y bien formadas. El valor src debe ser una URL absoluta o relativa correctamente formateada.
3. Codifica con porcentajes los caracteres especiales. Si un carácter especial es realmente parte de la URL (lo cual es raro para <), codifícalo: < se convierte en %3C, > se convierte en %3E, y así sucesivamente.
4. Inspecciona tu HTML generado. Ve el código fuente de la página en tu navegador para confirmar la salida real, en lugar de confiar en cómo se ve tu código antes del procesamiento.

Ejemplos

Incorrecto — sintaxis de plantilla en src

La etiqueta de plantilla no fue procesada, dejando un carácter < en el atributo src:

<img src="<%= user.avatar %>" alt="User avatar">

Incorrecto — HTML accidentalmente dentro de src

Los corchetes angulares de un marcado perdido terminaron en la URL:

<img src="images/<thumbnail>/photo.jpg" alt="Photo">

Correcto — una URL relativa válida

<img src="images/photo.jpg" alt="Photo">

Correcto — una URL absoluta válida

<img src="https://example.com/images/photo.jpg" alt="Photo">

Correcto — caracteres especiales codificados con porcentajes

Si la URL realmente requiere caracteres que no están permitidos en una URI, codifícalos con porcentajes:

<img src="https://example.com/search?q=a%3Cb" alt="Search result">

En este caso, %3C representa el carácter < en la cadena de consulta, haciendo que la URI sea válida.

Más información:

en.wikipedia.org

Wikipedia: percent-encoding

→