Validación HTML: Element “img” is missing required attribute “src”.

Acerca de este problema HTML

The src attribute is one of two required attributes on every <img> element (the other being alt). The HTML specification mandates src because an image element without a source has no meaningful content to render. Omitting it produces invalid markup and leads to unpredictable browser behavior — some browsers may display a broken image icon, while others may render nothing at all.

This issue commonly occurs in a few scenarios:

Templating placeholders — A developer adds an <img> tag intending to populate the src dynamically but forgets to set a default value.
Lazy loading implementations — Some lazy-loading scripts store the real URL in a data-src attribute and omit src entirely, which results in invalid HTML.
Incomplete markup — The attribute is simply forgotten during development.

Beyond validation, a missing src attribute causes accessibility problems. Screen readers rely on well-formed <img> elements to convey image information to users. A malformed image element can confuse assistive technologies and degrade the user experience.

How to fix it

Add a src attribute with a valid URL pointing to your image.
Always include an alt attribute as well — it’s also required and provides a text alternative for the image.
If you’re using lazy loading and want to defer the actual image source, set src to a lightweight placeholder (such as a tiny transparent image or a low-quality preview) and use the native loading="lazy" attribute instead of removing src.

Examples

❌ Missing `src` attribute

<img alt="A sunset over the ocean">

This triggers the validation error because src is absent.

❌ Source stored only in a `data-` attribute

<img data-src="/images/photo.jpg" alt="A sunset over the ocean">

While data-src is a valid custom data attribute, it does not satisfy the requirement for src. The validator will still report the error.

✅ Correct usage with `src` and `alt`

<img src="/images/photo.jpg" alt="A sunset over the ocean">

✅ Lazy loading with a placeholder `src`

<img
  src="/images/photo-placeholder.jpg"
  data-src="/images/photo-full.jpg"
  alt="A sunset over the ocean"
  loading="lazy">

Here, src points to a small placeholder image so the markup stays valid, while data-src holds the full-resolution URL for your lazy-loading script to swap in.

✅ Native lazy loading (no JavaScript needed)

<img src="/images/photo.jpg" alt="A sunset over the ocean" loading="lazy">

Modern browsers support the loading="lazy" attribute natively, so you can keep a valid src and still defer off-screen images without any custom scripting.