@contentful/f36-image

---

title: 'Image' type: 'component' status: 'stable' slug: /components/image/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/image' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-image--overview' typescript: ./src/Image.tsx

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)

Accessibility

Make sure you pass the required alt prop.