Image

The Image component is a plain proxy of the normal HTML img element but it adds support for the styled system layouting props (like margins, paddings, positioning, etc.).

Import

// Tree shakable import
import { Image } from '@bojagi/pablo';
// Or direct import
import { Image } from '@bojagi/pablo/Image';

Examples

Plain Image

You can display IconButtons in different sizes. By default they have the size medium. They can also be small and large.

Live Editor

<Image src="https://bojagi.io/images/bojagi-social-preview.jpg" width={500} />

Result

Loading...

Layouting an image

You can use margin to give images a bit of space around them

Live Editor

<Box bgColor="papayaWhip">
  <Image mx={1} my={2} src="https://bojagi.io/images/bojagi-social-preview.jpg" width={500} />
</Box>

Result

Loading...

Or you can use positioning

Live Editor

<Box position="relative" m={2} height={600} width={600} bgColor="papayaWhip">
  <Image position="absolute" top={50} left={200} src="https://bojagi.io/images/bojagi-social-preview.jpg" width={500} />
</Box>

Result

Loading...

Props

Name	Type	Default Value	Required	Description

Box props

Name	Type	Default Value	Required	Description