# Element “img” is missing required attribute “src”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-img-is-missing-required-attribute-src
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

1. **Add a `src` attribute** with a valid URL pointing to your image.
2. **Always include an `alt` attribute** as well — it's also required and provides a text alternative for the image.
3. 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

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

This triggers the validation error because `src` is absent.

### ❌ Source stored only in a `data-` attribute

```html
<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`

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

### ✅ Lazy loading with a placeholder `src`

```html
<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)

```html
<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.