Choose a version:

Image

Use this when you want to display an image.

Anchor to imagepropsImageProps

(ImageAccessibilityLabelProp | ImageAltProp) & (ImageSourceProp | ImageSrcProp) & ImageBaseProps

Anchor to ImageAccessibilityLabelProp

ImageAccessibilityLabelProp

Anchor to accessibilityLabel accessibilityLabel string Default: `''` required: An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an Image, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the description is displayed on screen instead. This has the benefit of letting a sighted user know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read considerations when writing alternative text to learn more.

An alt property is available as an alias for this for compatibility with the HTML specification. When both are specified, accessibilityLabel takes precedence.
Anchor to alt alt never

Anchor to ImageAltProp

ImageAltProp

Anchor to alt alt string required: An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written description provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an Image, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the description is displayed on screen instead. This has the benefit of letting a sighted user know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read considerations when writing alternative text to learn more.

This property is an alias for accessibilityLabel for compatibility with the HTML specification. When both are specified accessibilityLabel takes precedence.
Anchor to accessibilityLabel accessibilityLabel never

Anchor to ImageBaseProps

ImageBaseProps

Anchor to accessibilityRole accessibilityRole Extract<, 'decorative'>: Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.
Anchor to id id string: Defines a unique identifier which must be unique in the whole document.
Anchor to loading loading 'eager' | 'lazy' Default: `eager`: Determines the loading behavior of the image:

eager: Immediately loads the image, irrespective of its position within the visible viewport.

lazy: Delays loading the image until it approaches a specified distance from the viewport.
Anchor to onError onError () => void: Invoked on load error.
Anchor to onLoad onLoad () => void: Invoked when load completes successfully.

Anchor to ImageSourceProp

ImageSourceProp

Anchor to source source string required: The image source (either a remote URL or a local file resource; blob URLs are not currently supported).

A src property is available as an alias for this for compatibility with the HTML specification. When both are specified, source takes precedence.
Anchor to src src never

Anchor to ImageSrcProp

ImageSrcProp

Anchor to src src string required: The image source (either a remote URL or a local file resource; blob URLs are not currently supported).

This property is available as an alias for source for compatibility with the HTML specification. When both are specified, source takes precedence.
Anchor to source source never

ImageAccessibilityLabelProp

accessibilityLabel
An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written `description` provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `Image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `description` is displayed on screen instead. This has the benefit of letting a sighted user know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204) to learn more. An `alt` property is available as an alias for this for compatibility with the HTML specification. When both are specified, `accessibilityLabel` takes precedence.
```
string
```
alt
```
never
```

interface ImageAccessibilityLabelProp {
  /**
   * An alternative text description that describe the image for the reader to
   * understand what it is about. It is extremely useful for both users using
   * assistive technology and sighted users. A well written `description`
   * provides people with visual impairments the ability to participate in
   * consuming non-text content. When a screen readers encounters an `Image`,
   * the description is read and announced aloud. If an image fails to load,
   * potentially due to a poor connection, the `description` is displayed on
   * screen instead. This has the benefit of letting a sighted user know an
   * image was meant to load here, but as an alternative, they’re still able to
   * consume the text content. Read
   * [considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204)
   * to learn more.
   *
   * An `alt` property is available as an alias for this for compatibility with the HTML
   * specification. When both are specified, `accessibilityLabel` takes precedence.
   *
   * @defaultValue `''`
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt
   */
  accessibilityLabel: string;
  alt?: never;
}

ImageAltProp

accessibilityLabel
```
never
```
alt
An alternative text description that describe the image for the reader to understand what it is about. It is extremely useful for both users using assistive technology and sighted users. A well written `description` provides people with visual impairments the ability to participate in consuming non-text content. When a screen readers encounters an `Image`, the description is read and announced aloud. If an image fails to load, potentially due to a poor connection, the `description` is displayed on screen instead. This has the benefit of letting a sighted user know an image was meant to load here, but as an alternative, they’re still able to consume the text content. Read [considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204) to learn more. This property is an alias for `accessibilityLabel` for compatibility with the HTML specification. When both are specified `accessibilityLabel` takes precedence.
```
string
```

interface ImageAltProp {
  /**
   * An alternative text description that describe the image for the reader to
   * understand what it is about. It is extremely useful for both users using
   * assistive technology and sighted users. A well written `description`
   * provides people with visual impairments the ability to participate in
   * consuming non-text content. When a screen readers encounters an `Image`,
   * the description is read and announced aloud. If an image fails to load,
   * potentially due to a poor connection, the `description` is displayed on
   * screen instead. This has the benefit of letting a sighted user know an
   * image was meant to load here, but as an alternative, they’re still able to
   * consume the text content. Read
   * [considerations when writing alternative text](https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204)
   * to learn more.
   *
   * This property is an alias for `accessibilityLabel` for compatibility with the HTML
   * specification. When both are specified `accessibilityLabel` takes precedence.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#alt
   */
  alt: string;
  accessibilityLabel?: never;
}

ImageSourceProp

source
The image source (either a remote URL or a local file resource; blob URLs are not currently supported). A `src` property is available as an alias for this for compatibility with the HTML specification. When both are specified, `source` takes precedence.
```
string
```
src
```
never
```

interface ImageSourceProp {
  /**
   * The image source (either a remote URL or a local file resource; blob URLs are not currently supported).
   *
   * A `src` property is available as an alias for this for compatibility with the HTML
   * specification. When both are specified, `source` takes precedence.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src
   */
  source: string;
  src?: never;
}

ImageSrcProp

source
```
never
```
src
The image source (either a remote URL or a local file resource; blob URLs are not currently supported). This property is available as an alias for `source` for compatibility with the HTML specification. When both are specified, `source` takes precedence.
```
string
```

interface ImageSrcProp {
  /**
   * The image source (either a remote URL or a local file resource; blob URLs are not currently supported).
   *
   * This property is available as an alias for `source` for compatibility with the HTML
   * specification. When both are specified, `source` takes precedence.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#src
   */
  src: string;
  source?: never;
}

ImageBaseProps

accessibilityRole
Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.
```
Extract<AccessibilityRole, 'decorative'>
```
id
Defines a unique identifier which must be unique in the whole document.
```
string
```
loading
Determines the loading behavior of the image: - `eager`: Immediately loads the image, irrespective of its position within the visible viewport. - `lazy`: Delays loading the image until it approaches a specified distance from the viewport.
```
'eager' | 'lazy'
```
onError
Invoked on load error.
```
() => void
```
onLoad
Invoked when load completes successfully.
```
() => void
```

interface ImageBaseProps {
  /**
   * Sets the semantic meaning of the component’s content. When set,
   * the role will be used by assistive technologies to help users
   * navigate the page.
   */
  accessibilityRole?: Extract<AccessibilityRole, 'decorative'>;

  /**
   * Defines a unique identifier which must be unique in the whole document.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
   */
  id?: string;

  /**
   * Determines the loading behavior of the image:
   * - `eager`: Immediately loads the image, irrespective of its position within the visible viewport.
   * - `lazy`: Delays loading the image until it approaches a specified distance from the viewport.
   *
   * @defaultValue `eager`
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
   */
  loading?: 'eager' | 'lazy';

  /**
   * Invoked when load completes successfully.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
   */
  onLoad?(): void;

  /**
   * Invoked on load error.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
   */
  onError?(): void;
}

AccessibilityRole

'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic'

Was this section helpful?

Simple Image example

import {render, Image} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {

return (

);

}

Examples

Simple Image example

React

import {render, Image} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  return (
    <Image alt="Pickaxe" source="/assets/icons/64/pickaxe-1.png" />
  );
}

JS

import {extend, Image} from '@shopify/ui-extensions/admin';

extend('Playground', (root) => {
  const image = root.createComponent(Image, {
    alt: 'Pickaxe',
    source: '/assets/icons/64/pickaxe-1.png',
  });

  root.appendChild(image);
});

Preview

Anchor to relatedRelated

Icon