Verificação HTML: Valor inválido "X" para o atributo "src" no elemento "img": Caráter ilegal no segmento de caminho: espaço não é permitido.

Sobre este problema HTML

As URLs seguem regras de sintaxe rígidas definidas pela RFC 3986, que não permite caracteres de espaço literal em qualquer parte de uma URL — seja no caminho, string de consulta ou fragmento. Embora muitos navegadores lidem silenciosamente com espaços codificando-os antes de fazer uma solicitação, o HTML bruto ainda é inválido. O validador HTML W3C assinala isto porque o atributo src espera uma URL válida, e uma URL contendo um espaço bruto não está em conformidade com o padrão.

Esta questão aparece comumente em dois cenários: espaços em caminhos de ficheiro (por exemplo, my image.jpg) e espaços em valores de string de consulta (por exemplo, ?search=my term). Ambos devem ser codificados percentualmente. A forma codificada percentualmente de um espaço é %20. Em strings de consulta especificamente, você também pode ver + usado para representar espaços (como definido por application/x-www-form-urlencoded), que também é válido nesse contexto.

Além da conformidade com padrões, espaços brutos em URLs podem causar problemas reais. Alguns navegadores mais antigos ou clientes HTTP podem truncar a URL no primeiro espaço, levando a imagens quebradas ou falhas no carregamento de recursos. Espaços também podem causar problemas com partilha de links, copiar-colar e análise de URL no lado do servidor. A codificação adequada garante que as suas URLs funcionem de forma confiável em todos os ambientes.

Como corrigir

Substituir espaços por %20 em todas as partes da URL. Esta é a abordagem universalmente segura.
Renomear ficheiros para evitar espaços completamente. Use hífenes (-) ou sublinhados (_) em vez de espaços em nomes de ficheiros e diretórios.
Usar + em strings de consulta se preferir, embora %20 funcione em qualquer lugar numa URL.

Se estiver a gerar URLs programaticamente, use funções de codificação integradas como encodeURI() ou encodeURIComponent() do JavaScript para lidar com isto automaticamente.

Exemplos

Espaços no caminho do ficheiro

Isto desencadeia o erro de validação porque o nome do ficheiro contém um espaço:

<!-- ❌ Inválido: espaço no segmento de caminho -->

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

Corrija codificando o espaço:

<!-- ✅ Válido: espaço codificado como %20 -->

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

Ou melhor ainda, renomeie o ficheiro para evitar espaços:

<!-- ✅ Válido: sem espaços no nome do ficheiro -->

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

Espaços na string de consulta

Isto desencadeia o erro porque o valor do parâmetro de consulta contém um espaço:

<!-- ❌ Inválido: espaço na string de consulta -->

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

Corrija codificando percentualmente o espaço:

<!-- ✅ Válido: espaço codificado como %20 -->

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

Usar + também é aceitável em strings de consulta:

<!-- ✅ Válido: espaço codificado como + na string de consulta -->

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

Múltiplos espaços numa URL

Quando uma URL tem múltiplos espaços, cada um deve ser codificado:

<!-- ❌ Inválido: múltiplos espaços -->

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

<!-- ✅ Válido: todos os espaços codificados -->

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