Image#

Import#

import { Image } from 'bumbag';

Usage#

Editable example

<Image src="/bean.jpg" alt="Bean" width="500px" />

<Image src="/bean.jpg" alt="Bean" width="500px" />

CopyOpen in Playroom

<Image> is also responsive by default, however, if you want to fix the width, add the isFixed prop.

Editable example

<Image isFixed src="/bean.jpg" alt="Bean" width="500px" />

<Image
  isFixed
  src="/bean.jpg"
  alt="Bean"
  width="500px"
/>

CopyOpen in Playroom

Image fit#

Setting a fit prop to "contain" means that the whole image will fit in the bounds and it will not lose its scale.

Editable example

<Image fit="contain" height="300px" width="300px" src="/bean.jpg" alt="Bean" backgroundColor="whitesmoke" />

<Image
  fit="contain"
  height="300px"
  width="300px"
  src="/bean.jpg"
  alt="Bean"
  backgroundColor="whitesmoke"
/>

CopyOpen in Playroom

Setting a fit prop to "cover" means that the image will fill the bounds and it will not lose its scale.

Editable example

<Image fit="cover" height="300px" width="300px" src="/bean.jpg" alt="Bean" backgroundColor="whitesmoke" />

<Image
  fit="cover"
  height="300px"
  width="300px"
  src="/bean.jpg"
  alt="Bean"
  backgroundColor="whitesmoke"
/>

CopyOpen in Playroom

Positioning#

You can change the position of a fitted image with the fitPosition prop. This prop mimics the object-position CSS attribute.

Editable example

<Image fit="contain" fitPosition="top" height="300px" width="300px" src="/bean.jpg" alt="Bean" backgroundColor="whitesmoke" />

<Image
  fit="contain"
  fitPosition="top"
  height="300px"
  width="300px"
  src="/bean.jpg"
  alt="Bean"
  backgroundColor="whitesmoke"
/>

CopyOpen in Playroom

Editable example

<Image fit="cover" fitPosition="20px 10px" height="300px" width="300px" src="/bean.jpg" alt="Bean" backgroundColor="whitesmoke" />

<Image
  fit="cover"
  fitPosition="20px 10px"
  height="300px"
  width="300px"
  src="/bean.jpg"
  alt="Bean"
  backgroundColor="whitesmoke"
/>

CopyOpen in Playroom

Accessibility#

Rules#

• An image must have an alt prop. However, if it is a decorative image and the image is not intended to be read by a screen reader, pass through alt="".

References#

• WAI Aria Image Concepts

Props#

Image Props#

src string Required

fit "contain" | "cover"

How the image fits its bounds

fitPosition string

Positioning of the fitted image. Value can be "top", "left", "center", "right", "bottom" or an "x y" coordinate

isFixed boolean

Fix the width of the image. It will not be responsive.

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

Theming#

Image.styles.base

Show example

Image.styles.fixed

Show example

Image.styles.contain

Show example

Image.styles.cover

Show example