Validación HTML: El elemento "img" no tiene el atributo requerido "src".

Acerca de este problema HTML

El atributo src es uno de los dos atributos requeridos en cada elemento <img> (el otro es alt). La especificación HTML exige src porque un elemento de imagen sin una fuente no tiene contenido significativo que renderizar. Omitirlo produce marcado inválido y lleva a comportamientos impredecibles del navegador — algunos navegadores pueden mostrar un icono de imagen rota, mientras que otros pueden no renderizar nada en absoluto.

Este problema ocurre comúnmente en algunos escenarios:

Placeholders de plantillas — Un desarrollador añade una etiqueta <img> con la intención de llenar el src dinámicamente pero olvida establecer un valor por defecto.
Implementaciones de lazy loading — Algunos scripts de lazy loading almacenan la URL real en un atributo data-src y omiten src completamente, lo que resulta en HTML inválido.
Marcado incompleto — El atributo simplemente se olvida durante el desarrollo.

Más allá de la validación, un atributo src faltante causa problemas de accesibilidad. Los lectores de pantalla dependen de elementos <img> bien formados para transmitir información de imagen a los usuarios. Un elemento de imagen mal formado puede confundir las tecnologías de asistencia y degradar la experiencia del usuario.

Cómo solucionarlo

Añade un atributo src con una URL válida que apunte a tu imagen.
Incluye siempre un atributo alt también — también es requerido y proporciona una alternativa de texto para la imagen.
Si estás usando lazy loading y quieres diferir la fuente real de la imagen, establece src a un placeholder ligero (como una imagen transparente pequeña o una vista previa de baja calidad) y usa el atributo nativo loading="lazy" en lugar de eliminar src.

Ejemplos

❌ Atributo `src` faltante

<img alt="Un atardecer sobre el océano">

Esto desencadena el error de validación porque src está ausente.

❌ Fuente almacenada solo en un atributo `data-`

<img data-src="/images/photo.jpg" alt="Un atardecer sobre el océano">

Aunque data-src es un atributo de datos personalizado válido, no satisface el requisito para src. El validador seguirá reportando el error.

✅ Uso correcto con `src` y `alt`

<img src="/images/photo.jpg" alt="Un atardecer sobre el océano">

✅ Lazy loading con un `src` placeholder

<img
  src="/images/photo-placeholder.jpg"
  data-src="/images/photo-full.jpg"
  alt="Un atardecer sobre el océano"
  loading="lazy">

Aquí, src apunta a una imagen placeholder pequeña para que el marcado permanezca válido, mientras que data-src contiene la URL de alta resolución para que tu script de lazy loading la intercambie.

✅ Lazy loading nativo (no se necesita JavaScript)

<img src="/images/photo.jpg" alt="Un atardecer sobre el océano" loading="lazy">

Los navegadores modernos soportan el atributo loading="lazy" de forma nativa, por lo que puedes mantener un src válido y aún así diferir imágenes fuera de pantalla sin ningún script personalizado.