Image

Image component that can handle showing a loading skeleton while the image is loading.

Import

import { Image } from '@contentful/f36-image';
// or
import { Image } from '@contentful/f36-component';

Examples

Basic example

Without a src

The image component will render a loading skeleton matching the dimensions of the image if no src prop is passed.

Props (API reference)

Open in Storybook

Name

Type

Default

alt
required
string

Alt attribute to pass to the image element

height
required
string

Height of the final image once loaded

width
required
string

Width of the final image once loaded

className
string

CSS class to be appended to the root element

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

testId
string

A [data-test-id] attribute used for testing purposes

Accessibility

Make sure you pass the required alt prop.