Image

Import

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

Examples

Basic example

Hide code
function ImageBasicExample() {
  return (
    <Image
      alt='An image saying "Everyone is welcome here"'
      height="281px"
      width="500px"
      src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png"
    />
  );
}
function ImageBasicExample() {
  return (
    <Image
      alt='An image saying "Everyone is welcome here"'
      height="281px"
      width="500px"
      src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.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.

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

Accessibility

Make sure you pass the required alt prop.