Image

The Image component is used to display images.

Image composes Box so you can use all the style props and add responsive styles as well.

Import

import { Image } from '@sajari-ui/core';

import { Image } from '@sajari-ui/core';

Usage

Editable Example

<Image
  src="https://source.unsplash.com/user/erondu?1"
  htmlWidth="1080"
  htmlHeight="720"
  alt="Unplash photo"
  borderRadius="rounded"
/>

<Image
  src="https://source.unsplash.com/user/erondu?1"
  htmlWidth="1080"
  htmlHeight="720"
  alt="Unplash photo"
  borderRadius="rounded"
/>

Size

The size of the image can be adjusted using the width, height and objectFit props.

Editable Example

<Flex space="space-x-6" alignItems="items-center">
  <Image
    src="https://source.unsplash.com/user/erondu?2"
    alt="Unplash photo"
    height="h-32"
    width="w-32"
    objectFit="object-cover"
    borderRadius="rounded"
  />
  <Image
    src="https://source.unsplash.com/user/erondu?3"
    alt="Unplash photo"
    height="h-64"
    width="w-64"
    objectFit="object-cover"
    borderRadius="rounded"
  />
  <Image
    src="https://source.unsplash.com/user/erondu?4"
    alt="Unplash photo"
    height="h-96"
    width="w-96"
    objectFit="object-cover"
    borderRadius="rounded"
  />
</Flex>

<Flex space="space-x-6" alignItems="items-center">
  <Image
    src="https://source.unsplash.com/user/erondu?2"
    alt="Unplash photo"
    height="h-32"
    width="w-32"
    objectFit="object-cover"
    borderRadius="rounded"
  />
  <Image
    src="https://source.unsplash.com/user/erondu?3"
    alt="Unplash photo"
    height="h-64"
    width="w-64"
    objectFit="object-cover"
    borderRadius="rounded"
  />
  <Image
    src="https://source.unsplash.com/user/erondu?4"
    alt="Unplash photo"
    height="h-96"
    width="w-96"
    objectFit="object-cover"
    borderRadius="rounded"
  />
</Flex>

Rounded Image

Editable Example

<Image
  src="https://source.unsplash.com/user/erondu?5"
  alt="Unplash photo"
  height="h-24"
  width="w-24"
  objectFit="object-cover"
  borderRadius="rounded-full"
/>

<Image
  src="https://source.unsplash.com/user/erondu?5"
  alt="Unplash photo"
  height="h-24"
  width="w-24"
  objectFit="object-cover"
  borderRadius="rounded-full"
/>

Props

Name	Type	Description
`src`	`string`	The path to the image source.
`alt`	`string`	The alt text that describes the image.
`onLoad`	`function`	A callback for when the image `src` has been loaded.
`onError`	`function`	A callback for when there was an error loading the image `src`.
`htmlWidth`	`string`, `number`	The native HTML width attribute of the `img` element.
`htmlHeight`	`string`, `number`	The native HTML height attribute of the `img` element.