# Bad value “” for attribute “src” on element “img”: Must be non-empty.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-src-on-element-img-must-be-non-empty
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification requires the `src` attribute of an `<img>` element to be a valid, non-empty URL. When you set `src=""`, the browser has no resource to fetch, but many browsers will still attempt to make a request — often resolving the empty string relative to the current page URL. This means the browser may re-request the current HTML document as if it were an image, wasting bandwidth and potentially causing unexpected server-side behavior.

Beyond the technical waste, an empty `src` is problematic for accessibility. Screen readers rely on the `<img>` element to convey meaningful content. An image with no source provides no value and can confuse assistive technology users. Search engine crawlers may also flag this as a broken resource, negatively affecting SEO.

This issue commonly arises in a few scenarios:

- **Placeholder images** — developers leave `src` empty intending to set it later via JavaScript.
- **Template rendering** — a server-side template or frontend framework outputs an `<img>` tag before the image URL is available.
- **Lazy loading implementations** — the real source is stored in a `data-src` attribute while `src` is left empty.

## How to fix it

The simplest fix is to provide a valid image URL in the `src` attribute. If the image source isn't available yet, consider these alternatives:

1. **Don't render the `<img>` element at all** until a valid source is available.
2. **Use a small placeholder image** (such as a transparent 1×1 pixel GIF or a lightweight SVG) as a temporary `src`.
3. **Use native lazy loading** with `loading="lazy"` and a real `src`, letting the browser handle deferred loading instead of relying on an empty `src`.

## Examples

### ❌ Bad: empty `src` attribute

```html
<img src="" alt="Profile photo">
```

This triggers the validation error because the `src` value is an empty string.

### ❌ Bad: `src` with only whitespace

```html
<img src="  " alt="Profile photo">
```

Whitespace-only values are also considered invalid and will produce a similar error.

### ✅ Good: valid image path

```html
<img src="photo.jpg" alt="Profile photo">
```

### ✅ Good: placeholder image for lazy loading

If you're implementing lazy loading and need a lightweight placeholder, use a small inline data URI or a real placeholder file:

```html
<img
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  data-src="photo.jpg"
  alt="Profile photo">
```

### ✅ Good: native lazy loading with a real `src`

Modern browsers support the `loading` attribute, eliminating the need for an empty `src` workaround:

```html
<img src="photo.jpg" alt="Profile photo" loading="lazy">
```

### ✅ Good: conditionally render the element

If the image URL might not be available, avoid rendering the `<img>` tag entirely. For example, in a template:

```html
<!-- Only include the img element when a source exists -->
<img src="photo.jpg" alt="Profile photo">
```

In frameworks like React, Vue, or server-side templating engines, use conditional logic to skip the `<img>` element when the URL is empty rather than outputting a tag with an empty `src`.