Verificação HTML: Valor inválido "X" para o atributo "src" no elemento "img": Caráter ilegal nos dados do esquema: espaço não é permitido.

Sobre este problema HTML

Os URLs seguem regras de sintaxe rigorosas definidas pela RFC 3986, que não permite caracteres de espaço literais. Quando o validador W3C encontra um espaço no atributo src de um elemento <img>, reporta-o como um caráter ilegal nos dados do esquema. Embora a maioria dos navegadores modernos tente lidar com espaços em URLs codificando-os automaticamente, confiar neste comportamento não está em conformidade com os padrões e pode levar a imagens quebradas em certos contextos, como quando URLs são processados por outras ferramentas, APIs, ou navegadores mais antigos.

Este problema surge comumente quando nomes de ficheiros contêm espaços (por exemplo, my photo.jpg) e o caminho é copiado diretamente para o HTML. Pode também acontecer quando um URL é incorretamente construído concatenando strings com valores não codificados.

Além da validação, espaços não codificados podem causar problemas reais. Um URL com um espaço pode quebrar quando partilhado, copiado, ou passado através de redirecionamentos. Clientes de email e aplicações de mensagens podem truncar o URL no espaço. Rastreadores de motores de busca podem falhar ao indexar o recurso corretamente.

Como corrigir

Há várias maneiras de resolver este problema:

Codificar espaços por percentagem como %20 — Substituir cada espaço literal no URL por %20.
Renomear o ficheiro — Remover espaços dos nomes de ficheiros completamente, usando hífenes (-), underscores (_), ou camelCase em vez disso.
Usar funções adequadas de codificação de URL — Se gerar URLs dinamicamente (por exemplo, em JavaScript ou numa linguagem do lado do servidor), use funções de codificação incorporadas como encodeURI() ou encodeURIComponent().

Renomear ficheiros para evitar espaços é geralmente a melhor prática a longo prazo, pois previne problemas de codificação em todo o seu fluxo de trabalho.

Exemplos

❌ Inválido: espaços no atributo `src`

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

<img src="/assets/blog posts/header image.png" alt="Blog header">

Ambos irão desencadear o erro de validação porque o valor src contém caracteres de espaço literais.

✅ Corrigido: espaços codificados como `%20`

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

<img src="/assets/blog%20posts/header%20image.png" alt="Blog header">

✅ Corrigido: ficheiro renomeado para remover espaços

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

<img src="/assets/blog-posts/header-image.png" alt="Blog header">

Uma nota sobre `+` vs `%20`

Pode ver espaços codificados como + em alguns contextos (por exemplo, query strings em submissões de formulário usando application/x-www-form-urlencoded). No entanto, + não é um substituto válido para um espaço num caminho de URL. Use sempre %20 para espaços no atributo src.

<!-- ❌ Incorreto: + não representa um espaço num caminho de URL -->

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

<!-- ✅ Correto -->

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