Image

Use this component to display an image.

usage

import { Image, SvgImage } from "@sharegate/orbit-ui";

sources

Github

Guidelines

Accessibility

• An image must have an alt attribute.
• If the image does not add more information to the existing context(decorative), use alt="".

Usage

Shape

An image can use a different shape.

Editable example

<Inline> <Image shape="rounded" src={GalaxyImage} alt="Galaxy" width={12} height={12} /> <Image shape="circular" src={GalaxyImage} alt="Galaxy" width={12} height={12} /> </Inline>

<Inline>
    <Image shape="rounded" src={GalaxyImage} alt="Galaxy" width={12} height={12} />
    <Image shape="circular" src={GalaxyImage} alt="Galaxy" width={12} height={12} />
</Inline>

Size

An image size can be specifyied with the width and height props.

Editable example

<Image width="200px" height="200px" src={GalaxyImageLg} alt="Galaxy" />

<Image width="200px" height="200px" src={GalaxyImageLg} alt="Galaxy" />

Retina

You can let the browser decide which image is best to serve according to the user device screen pixel density.

It is highly recommended to serve a 1x image as well as a 2x image, twice the intended size. This assures the user has the best looking image possible.

Avoid serving images that are unecessary big, images should be resized to the intended final image display size. This assures we don't waste bandwith for the user.

Editable example

<Image width="200px" height="200px" srcSet={`${GalaxyImage} 1x, ${GalaxyImage2x} 2x`} alt="Galaxy" />

<Image
    width="200px"
    height="200px"
    srcSet={`${GalaxyImage} 1x, ${GalaxyImage2x} 2x`}
    alt="Galaxy"
/>

SvgImage

For some use cases, like dark mode support, an SVG image is a better fit than a standard PNG or JPG image. Orbit provide a component for these images which will take care for you of the accessibility attributes and enforce a mandatory aria-label attribute.

<SvgImage src={NoResults} stroke="purple-6" aria-label="No results" />

Size

An SVG image size can be specified with the width and height props.

<SvgImage width="150px" height="150px" stroke="purple-6" src={NoResults} aria-label="No results" />

Color

An SVG image stroke and fill color can vary.

<SvgImage stroke="purple-6" fill="warning-1" src={NoResults} aria-label="No results" />

API

Image

usage

import { Image } from "@sharegate/orbit-ui";

extends

• Img
• StyleProps

SvgImage

usage

import { SvgImage } from "@sharegate/orbit-ui";

extends

• Svg
• StyleProps