# Image

Use this when you want to display an image.

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

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

function App() {
  return (
    <Image alt="Pickaxe" source="https://shopify.dev/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: 'https://shopify.dev/assets/icons/64/pickaxe-1.png',
  });

  root.appendChild(image);
});

```

## ImageProps

### ImageAccessibilityLabelProp

### accessibilityLabel

value: `string`

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.

### alt

value: `never`


### ImageAltProp

### alt

value: `string`

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.

### accessibilityLabel

value: `never`


### ImageSourceProp

### source

value: `string`

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.

### src

value: `never`


### ImageSrcProp

### src

value: `string`

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.

### source

value: `never`


### ImageBaseProps

### accessibilityRole

value: `Extract<AccessibilityRole, '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.

### id

value: `string`

Defines a unique identifier which must be unique in the whole document.

### loading

value: `"eager" | "lazy"`

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.

### onLoad

value: `() => void`

Invoked when load completes successfully.

### onError

value: `() => void`

Invoked on load error.

## Related

- [Icon](https://shopify.dev/docs/api/admin-extensions/components/media/icon)