> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 473f6b68-33b1-4bae-9a71-cd6b80a1491b
---

# no-invalid-image-src

> Only allow valid image URLs in the src attribute of Image components from @hubspot/ui-extensions.

The `no-invalid-image-src` rule validates that the `src` attribute of [`<Image>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image) components uses valid URLs. Some invalid code flagged by this rule is eligible for fixing via the [`--fix` option](https://eslint.org/docs/latest/use/command-line-interface#--fix) provided by the ESLint CLI.

## Rule details

HubSpot's [`<Image>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image) component has specific requirements for the `src` attribute when using string values. This rule enforces those requirements to ensure images load correctly at runtime.

The rule validates that the `src` attribute:

1. Contains no leading or trailing whitespace (auto-fixable).
2. Uses absolute URLs, not relative paths.
3. Uses only allowed protocols: `http://`, `https://`, or `data:`.
4. Points to a valid image file type: `.jpg`, `.jpeg`, `.png`, `.gif`, `.svg`, `.webp`.

Dynamic values, such as variables, are <u>not</u> validated by this rule.

## Examples

### Whitespace in URLs

**Invalid:** extra space around the URL.

```jsx theme={null}
// Incorrect - whitespace around URL
import { Image } from '@hubspot/ui-extensions';

function App() {
  return <Image src=" https://example.com/image.png " />;
}
```

This can be fixed manually or by running the [npx eslint --fix](https://eslint.org/docs/latest/use/command-line-interface#--fix) command.

```jsx theme={null}
import { Image } from '@hubspot/ui-extensions';

function App() {
  return <Image src="https://example.com/image.png" />;
}
```

### Relative paths

**Invalid:** relative URL path:

```jsx theme={null}
// Incorrect - relative path not allowed
import { Image } from '@hubspot/ui-extensions';

function App() {
  return <Image src="./images/logo.png" />;
}
```

Instead use absolute URLs with supported protocols:

```jsx theme={null}
import { Image } from '@hubspot/ui-extensions';

function App() {
  return <Image src="https://example.com/image.png" />;
}
```

### Invalid protocols

**Invalid:** unsupported image URL protocol:

```jsx theme={null}
// Incorrect - FTP not supported
import { Image } from '@hubspot/ui-extensions';

function App() {
  return <Image src="ftp://example.com/image.png" />;
}
```

Use `http://`, `https://`, or `data:` protocol instead:

```jsx theme={null}
import { Image } from '@hubspot/ui-extensions';

function App() {
  return <Image src="https://example.com/image.png" />;
}
```

### Invalid file types

**Invalid:** unsupported file type:

```jsx theme={null}
// Incorrect - .bmp not supported
import { Image } from '@hubspot/ui-extensions';

function App() {
  return <Image src="https://example.com/image.bmp" />;
}
```

Use supported image formats instead (`.jpg`, `.jpeg`, `.png`, `.gif`, `.svg`, `.webp`):

```jsx theme={null}
import { Image } from '@hubspot/ui-extensions';

function App() {
  return <Image src="https://example.com/image.png" />;
}
```

### Dynamic values

Dynamic values are <u>not</u> validated by this rule:

```jsx theme={null}
import { Image } from '@hubspot/ui-extensions';

function App({ imageUrl }) {
  return <Image src={imageUrl} />;
}
```

## Related resources

* [Image component](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/image)
* [UI components overview](/apps/developer-platform/add-features/ui-extensions/ui-components/overview)