Verificação HTML: Valor inválido X para o atributo "src" no elemento "img": Barra invertida ("\") usada como delimitador de segmento de caminho.

Sobre este problema HTML

Barras invertidas não são delimitadores válidos em URLs de acordo com o URL Living Standard. Embora alguns browsers possam normalizar silenciosamente barras invertidas para barras normais, este comportamento não é padrão e não deve ser utilizado como referência. Usar barras invertidas em URLs pode levar a imagens quebradas, comportamento inesperado em diferentes browsers, e falhas em ambientes que seguem estritamente as especificações de URL (como servidores HTTP, CDNs, ou ferramentas de validação).

Este problema surge comumente quando os desenvolvedores copiam caminhos de ficheiro diretamente de um sistema de ficheiros Windows — onde \ é o separador de diretório — e os colam em atributos src de HTML. Também pode acontecer quando código do lado do servidor gera URLs usando funções de caminho ao nível do SO em vez de utilitários de construção de URL.

Além da conformidade com padrões, isto importa por várias razões práticas:

Fiabilidade entre browsers: Nem todos os browsers ou clientes HTTP normalizam barras invertidas da mesma forma.
Compatibilidade do servidor: Muitos servidores web interpretam barras invertidas literalmente, resultando em erros 404.
Portabilidade: Código com caminhos de barra invertida pode funcionar no desenvolvimento local no Windows mas quebrar quando implementado num servidor baseado em Linux.

Para corrigir o problema, localize cada barra invertida no valor do atributo src e substitua-a por uma barra normal. Isto aplica-se a todos os contextos de URL, não apenas elementos img — embora o validador o sinalize especificamente aqui.

Exemplos

❌ Incorreto: barras invertidas no caminho `src`

<img src="images\photos\landscape.jpg" alt="Mountain landscape">

<img src="https://example.com\img\small\photo.png" alt="Example image">

Ambos usam barras invertidas como delimitadores de caminho, o que desencadeia o erro de validação.

✅ Correto: barras normais no caminho `src`

<img src="images/photos/landscape.jpg" alt="Mountain landscape">

<img src="https://example.com/img/small/photo.png" alt="Example image">

Simplesmente substituir \ por / resolve o problema e produz um URL válido e portável.

❌ Incorreto: delimitadores mistos

<img src="assets/images\banner\hero.webp" alt="Hero banner">

Mesmo uma única barra invertida num caminho válido de resto irá desencadear este erro.

✅ Correto: barras normais consistentes

<img src="assets/images/banner/hero.webp" alt="Hero banner">

Dicas para evitar este problema

Não copie e cole caminhos de ficheiro do Windows diretamente no HTML. Converta sempre barras invertidas para barras normais.
Use a função localizar e substituir do seu editor para procurar \ dentro de atributos src em todo o seu projeto.
Se gerar URLs em código do lado do servidor, use funções de construção de URL em vez de funções de caminho do sistema de ficheiros. Por exemplo, no Node.js, use o módulo url ou template literals com / em vez de path.join(), que usa \ no Windows.
Execute o validador W3C regularmente durante o desenvolvimento para detetar problemas como este antes da implementação.