Import

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

Examples

Basic example

function ImageBasicExample() {
  return (
    <Image
      alt='An image saying "Everyone is welcome here"'
      height="281px"
      width="500px"
      src="https://images.ctfassets.net/iq4lnigp6fgt/72KhxI84kw1SE9gP8gDp7R/c5fa24bdc295a318018aea0ca46e2de8/forma-36-storybook-asset.png"
    />
  );
}

Open in Playground

Without a `src`

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

function ImageBasicExample() {
  return (
    <Image
      alt='An image saying "Everyone is welcome here"'
      height="281px"
      width="500px"
    />
  );
}

Open in Playground

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
testId	string A [data-test-id] attribute used for testing purposes

Accessibility

Make sure you pass the required alt prop.

Import

Examples

Basic example

Without a src

Props (API reference)

Name

Type

Default

Accessibility

Help improve this page

Without a `src`