# Bad value for attribute “src” on element “img”: Illegal character in scheme data: “<” is not allowed.

> Canonical HTML version: https://rocketvalidator.com/html-validation/bad-value-for-attribute-src-on-element-img-illegal-character-in-scheme-data-lt-is-not-allowed
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The W3C HTML validator raises this error when the `src` attribute of an `<img>` element contains characters that are not permitted in a valid URI. The most common culprit is the `<` character, but other characters like `>`, `{`, `}`, `|`, `\`, `^`, and backticks are also illegal in URIs according to [RFC 3986](https://www.rfc-editor.org/rfc/rfc3986).

This issue typically occurs in a few common scenarios:

- **Template syntax left unresolved:** Server-side or client-side template tags (e.g., `<%= imageUrl %>`, `{{ image.src }}`) appear literally in the HTML output instead of being processed into actual URLs.
- **Copy-paste errors:** HTML markup or angle brackets accidentally end up inside a `src` value.
- **Malformed dynamic URLs:** JavaScript or server-side code incorrectly constructs a URL that includes raw HTML or special characters.

This matters because browsers may fail to load the image or interpret the URL unpredictably. Invalid URIs can also cause issues with screen readers and assistive technologies that try to resolve the `src` to provide context about the image. Keeping your markup standards-compliant ensures consistent behavior across all browsers and environments.

### How to fix it

1. **Check for unprocessed template tags.** If you see template syntax like `<%`, `{{`, or similar in the rendered HTML, ensure your templating engine is running correctly and outputting the resolved URL.
2. **Use valid, well-formed URLs.** The `src` value should be a properly formatted absolute or relative URL.
3. **Percent-encode special characters.** If a special character is genuinely part of the URL (which is rare for `<`), encode it: `<` becomes `%3C`, `>` becomes `%3E`, and so on.
4. **Inspect your generated HTML.** View the page source in your browser to confirm the actual output, rather than relying on what your code looks like before processing.

## Examples

### Incorrect — template syntax in `src`

The template tag was not processed, leaving a `<` character in the `src` attribute:

```html
<img src="<%= user.avatar %>" alt="User avatar">
```

### Incorrect — HTML accidentally inside `src`

Angle brackets from stray markup ended up in the URL:

```html
<img src="images/<thumbnail>/photo.jpg" alt="Photo">
```

### Correct — a valid relative URL

```html
<img src="images/photo.jpg" alt="Photo">
```

### Correct — a valid absolute URL

```html
<img src="https://example.com/images/photo.jpg" alt="Photo">
```

### Correct — special characters percent-encoded

If the URL genuinely requires characters that are not allowed in a URI, percent-encode them:

```html
<img src="https://example.com/search?q=a%3Cb" alt="Search result">
```

In this case, `%3C` represents the `<` character in the query string, making the URI valid.