Image

Image displays pictures from URLs or local sources with built-in responsive sizing, aspect ratio control, and accessibility features. It handles different image formats and provides options for lazy loading and click interactions.

Properties

`alt`

This optional property specifies an alternate text for the image.

This is useful in two cases:

Accessibility: screen readers read the prop value to users so they know what the image is about.
The text is also displayed when the image can't be loaded for some reason (network errors, content blocking, etc.).

<App>
  <Image 
    src="cantFindIt.jpg" 
    alt="This image depicts a wonderful scene not for human eyes" />
</App>

Example: alt

<App>
  <Image 
    src="cantFindIt.jpg" 
    alt="This image depicts a wonderful scene not for human eyes" />
</App>

`aspectRatio`

This property sets a preferred aspect ratio for the image, which will be used in calculating auto sizes and other layout functions. If this value is not used, the original aspect ratio is kept. The value can be a number of a string (such as "16/9").

<App>
  <Image 
    src="/resources/images/components/image/breakfast.jpg" 
    aspectRatio="200 / 150" />
</App>

Example: aspectRatio

<App>
  <Image 
    src="/resources/images/components/image/breakfast.jpg" 
    aspectRatio="200 / 150" />
</App>

`fit` (default: "contain")

This property sets how the image content should be resized to fit its container.

Name	Value
`contain`	The replaced content is scaled to maintain its aspect ratio while fitting within the image's container. The entire image is made to fill the container.
`cover`	The image is sized to maintain its aspect ratio while filling the element's entire content box. If the image's aspect ratio does not match the aspect ratio of its container, then the image will be clipped to fit.

<App>
  <HStack padding="1rem" height="280px" gap="1rem">
    <Image 
      src="/resources/images/components/image/breakfast.jpg" 
      fit="contain" 
      width="240px" />
    <Image 
      src="/resources/images/components/image/breakfast.jpg" 
      fit="cover" 
      width="240px" />
  </HStack>
</App>

Example: fit

<App>
  <HStack padding="1rem" height="280px" gap="1rem">
    <Image 
      src="/resources/images/components/image/breakfast.jpg" 
      fit="contain" 
      width="240px" />
    <Image 
      src="/resources/images/components/image/breakfast.jpg" 
      fit="cover" 
      width="240px" />
  </HStack>
</App>

`inline` (default: false)

When set to true, the image will be displayed as an inline element instead of a block element.

`lazyLoad` (default: false)

Lazy loading instructs the browser to load the image only when it is imminently needed (e.g. user scrolls to it).

Lazy loading instructs the browser to load the image only when it is imminently needed (e.g. user scrolls to it). The default value is eager (`false`).

`src`

This property is used to indicate the source (path) of the image to display. When not defined, no image is displayed.

Events

`click`

This event is triggered when the Image is clicked.

This event is triggered when the image is clicked.

<App>
  <Stack height="280px" width="400px">
    <Image
      src="/resources/images/components/image/breakfast.jpg"
      fit="cover"
      onClick="toast('Image clicked')"
    />
  </Stack>
</App>

Example: click

<App>
  <Stack height="280px" width="400px">
    <Image
      src="/resources/images/components/image/breakfast.jpg"
      fit="cover"
      onClick="toast('Image clicked')"
    />
  </Stack>
</App>

Exposed Methods

This component does not expose any methods.

Styling

This component does not have any styles.