Image - HubSpot docs

The Image component renders an image. Use this component to add a logo or other visual brand identity asset, or to accentuate other content in the extension. Images cannot exceed the width of the extension’s container at various screen sizes, and values beyond that maximum width will not be applied to the image.

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

const Extension = () => {
  return (
    <Image
      alt="A picture of a welcome sign"
      src="https://picsum.photos/id/237/200/300"
      href={{
        url: "https://www.wikipedia.org",
        external: true,
      }}
      onClick={() => {
        console.log("Someone clicked the image!");
      }}
      width={200}
    />
  );
};

Props

Prop	Type	Description
`alt`	String	The alt text for the image, similar to the `alt` attribute for the HTML img tag.
`height`	Number	The pixel height of the image.
`href`	String \| Object	When provided, sets the URL that will open when the image is clicked. Can be set to a URL string or an object with the following fields: `url` (string): the URL that will open on click. `external` (boolean, optional): set to `true` to open the URL in a new tab. By default: Links to HubSpot app pages will open in the same tab. Links to non-HubSpot app pages will open in a new tab. When an image includes both `href` and an `onClick` action, both will be executed on button click.
`onClick`	`() => void`	A function that will be called when the image is clicked. This function will receive no arguments and any returned values will be ignored.
`overlay`	Object	Include a Modal or Panel component in this object to open it as an overlay on click. Learn more about using overlays.
`src`	String	The source of the image display. You can specify a URL or you can `import` the image directly if it’s within your project. Learn more about image sources.
`width`	Number	The pixel width of the image.

Image guidelines

Supported types: the Image component supports the following file types: .jpg, .jpeg, .png, .gif, .svg, .webp.
Supported sources: the src prop specifies the source of the image, which can be a URL (shown above) or you can import the file if it’s included in your project. To import images, first add the files to your project, then import them by relative path (shown below). While there’s no specific file size limit for images bundled in projects, the total size of your project cannot exceed 50MB.

import { Image } from "@hubspot/ui-extensions";
import myImage from "./images/myImage.png";
import myImage2 from "./images/myImage2.png";

const Extension = () => {
  return (
    <>
      <Image src={myImage} width={300}></Image>
      <Image src={myImage2} width={300}></Image>
    </>
  );
};

​Props

​Image guidelines

​Related components

Props

Image guidelines

Related components