Validación HTML: Valor incorrecto "" para el atributo "src" en el elemento "img": Debe ser no vacío.

Acerca de este problema HTML

La especificación HTML requiere que el atributo src de un elemento <img> sea una URL válida y no vacía. Cuando estableces src="", el navegador no tiene ningún recurso que obtener, pero muchos navegadores aún intentarán realizar una petición — a menudo resolviendo la cadena vacía relativa a la URL de la página actual. Esto significa que el navegador puede volver a solicitar el documento HTML actual como si fuera una imagen, desperdiciando ancho de banda y potencialmente causando comportamientos inesperados del lado del servidor.

Más allá del desperdicio técnico, un src vacío es problemático para la accesibilidad. Los lectores de pantalla dependen del elemento <img> para transmitir contenido significativo. Una imagen sin fuente no proporciona valor alguno y puede confundir a los usuarios de tecnologías asistivas. Los rastreadores de motores de búsqueda también pueden marcar esto como un recurso roto, afectando negativamente al SEO.

Este problema comúnmente surge en algunos escenarios:

Imágenes de marcador de posición — los desarrolladores dejan src vacío con la intención de establecerlo más tarde mediante JavaScript.
Renderizado de plantillas — una plantilla del lado del servidor o framework frontend genera una etiqueta <img> antes de que la URL de la imagen esté disponible.
Implementaciones de carga diferida — la fuente real se almacena en un atributo data-src mientras src se deja vacío.

Cómo solucionarlo

La solución más simple es proporcionar una URL de imagen válida en el atributo src. Si la fuente de la imagen aún no está disponible, considera estas alternativas:

No renderizar el elemento <img> en absoluto hasta que una fuente válida esté disponible.
Usar una imagen de marcador de posición pequeña (como un GIF transparente de 1×1 píxel o un SVG ligero) como src temporal.
Usar carga diferida nativa con loading="lazy" y un src real, dejando que el navegador maneje la carga diferida en lugar de depender de un src vacío.

Ejemplos

❌ Incorrecto: atributo `src` vacío

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

Esto desencadena el error de validación porque el valor de src es una cadena vacía.

❌ Incorrecto: `src` con solo espacios en blanco

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

Los valores con solo espacios en blanco también se consideran inválidos y producirán un error similar.

✅ Correcto: ruta de imagen válida

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

✅ Correcto: imagen de marcador de posición para carga diferida

Si estás implementando carga diferida y necesitas un marcador de posición ligero, usa una URI de datos en línea pequeña o un archivo de marcador de posición real:

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

✅ Correcto: carga diferida nativa con un `src` real

Los navegadores modernos soportan el atributo loading, eliminando la necesidad de una solución alternativa con src vacío:

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

✅ Correcto: renderizar el elemento condicionalmente

Si la URL de la imagen podría no estar disponible, evita renderizar la etiqueta <img> completamente. Por ejemplo, en una plantilla:

<!-- Solo incluir el elemento img cuando existe una fuente -->

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

En frameworks como React, Vue, o motores de plantillas del lado del servidor, usa lógica condicional para omitir el elemento <img> cuando la URL esté vacía en lugar de generar una etiqueta con un src vacío.