Validación HTML: Valor incorrecto "X" para el atributo "src" en el elemento "img": Carácter ilegal en el segmento de ruta: no se permite espacio.

Acerca de este problema HTML

Las URLs siguen reglas de sintaxis estrictas definidas por RFC 3986, que no permite caracteres de espacio literales en ninguna parte de una URL, ya sea en la ruta, cadena de consulta o fragmento. Aunque muchos navegadores manejarán silenciosamente los espacios codificándolos antes de hacer una solicitud, el HTML sin procesar sigue siendo inválido. El validador HTML de W3C marca esto porque el atributo src espera una URL válida, y una URL que contiene un espacio sin procesar no cumple con el estándar.

Este problema aparece comúnmente en dos escenarios: espacios en rutas de archivos (ej., my image.jpg) y espacios en valores de cadenas de consulta (ej., ?search=my term). Ambos deben ser codificados por porcentaje. La forma codificada por porcentaje de un espacio es %20. En cadenas de consulta específicamente, también puedes ver + usado para representar espacios (según se define en application/x-www-form-urlencoded), que también es válido en ese contexto.

Más allá del cumplimiento de estándares, los espacios sin procesar en URLs pueden causar problemas reales. Algunos navegadores más antiguos o clientes HTTP pueden truncar la URL en el primer espacio, llevando a imágenes rotas o cargas de recursos fallidas. Los espacios también pueden causar problemas con el compartir enlaces, copiar-pegar y el análisis de URLs del lado del servidor. La codificación adecuada asegura que tus URLs funcionen de manera confiable en todos los entornos.

Cómo solucionarlo

Reemplaza espacios con %20 en todas las partes de la URL. Este es el enfoque universalmente seguro.
Renombra archivos para evitar espacios por completo. Usa guiones (-) o guiones bajos (_) en lugar de espacios en nombres de archivos y directorios.
Usa + en cadenas de consulta si prefieres, aunque %20 funciona en cualquier lugar de una URL.

Si estás generando URLs programáticamente, usa funciones de codificación incorporadas como encodeURI() o encodeURIComponent() de JavaScript para manejar esto automáticamente.

Ejemplos

Espacios en la ruta del archivo

Esto desencadena el error de validación porque el nombre del archivo contiene un espacio:

<!-- ❌ Inválido: espacio en segmento de ruta -->

<img src="/images/my photo.jpg" alt="A vacation photo">

Soluciónalo codificando el espacio:

<!-- ✅ Válido: espacio codificado como %20 -->

<img src="/images/my%20photo.jpg" alt="A vacation photo">

O mejor aún, renombra el archivo para evitar espacios:

<!-- ✅ Válido: sin espacios en el nombre del archivo -->

<img src="/images/my-photo.jpg" alt="A vacation photo">

Espacios en la cadena de consulta

Esto desencadena el error porque el valor del parámetro de consulta contiene un espacio:

<!-- ❌ Inválido: espacio en cadena de consulta -->

<img src="https://example.com/image?title=sunset beach" alt="Sunset at the beach">

Soluciónalo codificando el espacio por porcentaje:

<!-- ✅ Válido: espacio codificado como %20 -->

<img src="https://example.com/image?title=sunset%20beach" alt="Sunset at the beach">

Usar + también es aceptable en cadenas de consulta:

<!-- ✅ Válido: espacio codificado como + en cadena de consulta -->

<img src="https://example.com/image?title=sunset+beach" alt="Sunset at the beach">

Múltiples espacios en una URL

Cuando una URL tiene múltiples espacios, cada uno debe ser codificado:

<!-- ❌ Inválido: múltiples espacios -->

<img src="/uploads/user photos/trip to paris.jpg" alt="Trip to Paris">

<!-- ✅ Válido: todos los espacios codificados -->

<img src="/uploads/user%20photos/trip%20to%20paris.jpg" alt="Trip to Paris">