Verificação HTML: Valor inválido "" para o atributo "src" no elemento "img": deve ser não vazio.

Sobre este problema HTML

A especificação HTML exige que o atributo src de um elemento <img> seja um URL válido e não vazio. Quando define src="", o navegador não tem nenhum recurso para buscar, mas muitos navegadores ainda tentarão fazer um pedido — frequentemente resolvendo a string vazia relativamente ao URL da página atual. Isto significa que o navegador pode voltar a pedir o documento HTML atual como se fosse uma imagem, desperdiçando largura de banda e potencialmente causando comportamento inesperado do lado do servidor.

Para além do desperdício técnico, um src vazio é problemático para a acessibilidade. Os leitores de ecrã dependem do elemento <img> para transmitir conteúdo significativo. Uma imagem sem fonte não fornece valor e pode confundir os utilizadores de tecnologias assistivas. Os rastreadores dos motores de pesquisa também podem sinalizar isto como um recurso quebrado, afetando negativamente o SEO.

Esta questão surge comumente em alguns cenários:

Imagens placeholder — os programadores deixam o src vazio com a intenção de o definir mais tarde via JavaScript.
Renderização de templates — um template do lado do servidor ou framework frontend produz uma tag <img> antes do URL da imagem estar disponível.
Implementações de lazy loading — a fonte real é armazenada num atributo data-src enquanto o src fica vazio.

Como corrigir

A correção mais simples é fornecer um URL de imagem válido no atributo src. Se a fonte da imagem ainda não estiver disponível, considere estas alternativas:

Não renderize o elemento <img> de todo até que uma fonte válida esteja disponível.
Use uma pequena imagem placeholder (como um GIF transparente de 1×1 pixel ou um SVG leve) como src temporário.
Use lazy loading nativo com loading="lazy" e um src real, deixando o navegador gerir o carregamento diferido em vez de depender de um src vazio.

Exemplos

❌ Mau: atributo `src` vazio

<img src="" alt="Foto de perfil">

Isto despoleta o erro de validação porque o valor de src é uma string vazia.

❌ Mau: `src` apenas com espaços em branco

<img src="  " alt="Foto de perfil">

Valores apenas com espaços em branco também são considerados inválidos e produzirão um erro similar.

✅ Bom: caminho de imagem válido

<img src="foto.jpg" alt="Foto de perfil">

✅ Bom: imagem placeholder para lazy loading

Se estiver a implementar lazy loading e precisar de um placeholder leve, use um pequeno data URI inline ou um ficheiro placeholder real:

<img
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  data-src="foto.jpg"
  alt="Foto de perfil">

✅ Bom: lazy loading nativo com um `src` real

Os navegadores modernos suportam o atributo loading, eliminando a necessidade de uma solução alternativa com src vazio:

<img src="foto.jpg" alt="Foto de perfil" loading="lazy">

✅ Bom: renderizar o elemento condicionalmente

Se o URL da imagem pode não estar disponível, evite renderizar a tag <img> completamente. Por exemplo, num template:

<!-- Incluir apenas o elemento img quando existe uma fonte -->

<img src="foto.jpg" alt="Foto de perfil">

Em frameworks como React, Vue, ou motores de templates do lado do servidor, use lógica condicional para omitir o elemento <img> quando o URL está vazio em vez de produzir uma tag com um src vazio.