no-invalid-image-src - HubSpot docs

The no-invalid-image-src rule validates that the src attribute of <Image> components uses valid URLs. Some invalid code flagged by this rule is eligible for fixing via the --fix option provided by the ESLint CLI.

Rule details

HubSpot’s <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:

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

Dynamic values, such as variables, are not validated by this rule.

Examples

Whitespace in URLs

Invalid: extra space around the URL.

// 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 command.

import { Image } from '@hubspot/ui-extensions';

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

Relative paths

Invalid: relative URL path:

// 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:

import { Image } from '@hubspot/ui-extensions';

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

Invalid protocols

Invalid: unsupported image URL protocol:

// 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:

import { Image } from '@hubspot/ui-extensions';

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

Invalid file types

Invalid: unsupported file type:

// 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):

import { Image } from '@hubspot/ui-extensions';

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

Dynamic values

Dynamic values are not validated by this rule:

import { Image } from '@hubspot/ui-extensions';

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

​Rule details

​Examples

​Whitespace in URLs

​Relative paths

​Invalid protocols

​Invalid file types

​Dynamic values

​Related resources