Valor inválido para o atributo “src” no elemento “img”: Caráter ilegal no esquema de dados: “<” não é permitido.

O validador HTML do W3C gera este erro quando o atributo src de um elemento <img> contém carateres que não são permitidos numa URI válida. O culpado mais comum é o caráter <, mas outros carateres como >, {, }, |, \, ^, e acentos graves também são ilegais em URIs de acordo com RFC 3986.

Este problema normalmente ocorre em alguns cenários comuns:

• Sintaxe de template não resolvida: Tags de template do lado do servidor ou do cliente (por exemplo, <%= imageUrl %>, {{ image.src }}) aparecem literalmente na saída HTML em vez de serem processadas em URLs reais.
• Erros de copiar-colar: Marcação HTML ou parênteses angulares acabam acidentalmente dentro de um valor src.
• URLs dinâmicos mal formados: JavaScript ou código do lado do servidor constrói incorretamente um URL que inclui HTML bruto ou carateres especiais.

Isto é importante porque os navegadores podem falhar ao carregar a imagem ou interpretar o URL de forma imprevisível. URIs inválidos também podem causar problemas com leitores de ecrã e tecnologias assistivas que tentam resolver o src para fornecer contexto sobre a imagem. Manter a sua marcação em conformidade com os padrões garante comportamento consistente em todos os navegadores e ambientes.

Como corrigir

1. Verifique tags de template não processadas. Se você vir sintaxe de template como <%, {{, ou similar no HTML renderizado, certifique-se de que o seu motor de templates está a funcionar corretamente e a produzir o URL resolvido.
2. Use URLs válidos e bem formados. O valor src deve ser um URL absoluto ou relativo devidamente formatado.
3. Codifique carateres especiais por percentagem. Se um caráter especial faz genuinamente parte do URL (o que é raro para <), codifique-o: < torna-se %3C, > torna-se %3E, e assim por diante.
4. Inspecione o seu HTML gerado. Veja o código-fonte da página no seu navegador para confirmar a saída real, em vez de confiar no aspeto do seu código antes do processamento.

Exemplos

Incorreto — sintaxe de template no src

A tag de template não foi processada, deixando um caráter < no atributo src:

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

Incorreto — HTML acidentalmente dentro do src

Parênteses angulares de marcação perdida acabaram no URL:

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

Correto — um URL relativo válido

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

Correto — um URL absoluto válido

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

Correto — carateres especiais codificados por percentagem

Se o URL genuinamente requer carateres que não são permitidos numa URI, codifique-os por percentagem:

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

Neste caso, %3C representa o caráter < na string de consulta, tornando a URI válida.

Saiba mais:

en.wikipedia.org

Wikipedia: percent-encoding

→