Verificação HTML: Elemento "img" está faltando o atributo obrigatório "src".

Sobre este problema HTML

O atributo src é um dos dois atributos obrigatórios em cada elemento <img> (o outro sendo alt). A especificação HTML exige o src porque um elemento de imagem sem uma fonte não possui conteúdo significativo para renderizar. Omiti-lo produz markup inválido e leva a comportamentos imprevisíveis do navegador — alguns navegadores podem exibir um ícone de imagem quebrada, enquanto outros podem não renderizar nada.

Este problema ocorre comumente em alguns cenários:

Marcadores de template — Um desenvolvedor adiciona uma tag <img> com a intenção de popular o src dinamicamente, mas esquece de definir um valor padrão.
Implementações de lazy loading — Alguns scripts de lazy-loading armazenam o URL real num atributo data-src e omitem completamente o src, o que resulta em HTML inválido.
Markup incompleto — O atributo é simplesmente esquecido durante o desenvolvimento.

Além da validação, um atributo src em falta causa problemas de acessibilidade. Os leitores de ecrã dependem de elementos <img> bem formados para transmitir informações de imagem aos utilizadores. Um elemento de imagem malformado pode confundir tecnologias assistivas e degradar a experiência do utilizador.

Como corrigir

Adicione um atributo src com um URL válido apontando para a sua imagem.
Inclua sempre um atributo alt também — ele também é obrigatório e fornece uma alternativa textual para a imagem.
Se está a usar lazy loading e quer adiar a fonte real da imagem, defina src para um placeholder leve (como uma imagem transparente pequena ou uma pré-visualização de baixa qualidade) e use o atributo nativo loading="lazy" em vez de remover o src.

Exemplos

❌ Atributo `src` em falta

<img alt="Um pôr do sol sobre o oceano">

Isto aciona o erro de validação porque src está ausente.

❌ Fonte armazenada apenas num atributo `data-`

<img data-src="/images/photo.jpg" alt="Um pôr do sol sobre o oceano">

Embora data-src seja um atributo de dados customizado válido, não satisfaz o requisito para src. O validador ainda reportará o erro.

✅ Uso correto com `src` e `alt`

<img src="/images/photo.jpg" alt="Um pôr do sol sobre o oceano">

✅ Lazy loading com um `src` placeholder

<img
  src="/images/photo-placeholder.jpg"
  data-src="/images/photo-full.jpg"
  alt="Um pôr do sol sobre o oceano"
  loading="lazy">

Aqui, src aponta para uma imagem placeholder pequena para que o markup permaneça válido, enquanto data-src contém o URL de alta resolução para o seu script de lazy-loading substituir.

✅ Lazy loading nativo (não requer JavaScript)

<img src="/images/photo.jpg" alt="Um pôr do sol sobre o oceano" loading="lazy">

Os navegadores modernos suportam o atributo loading="lazy" nativamente, então você pode manter um src válido e ainda adiar imagens fora do ecrã sem qualquer script personalizado.