Image

Image displays an image element.

Import

import { Image } from "@prismane/core";

Usage

<Image
  h={360}
  src="https://cdn.fstoppers.com/styles/full/s3/media/2017/09/10/1_use_psychology_to_take_better_photographs.jpeg"
  alt="Person Image"
/>

Object Fit

You can change the object-fit property of the Image component, by providing a value to the fit property.

<Image
  h={360}
  w={420}
  src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/35af6a41332353.57a1ce913e889.jpg"
  alt="Person Image"
  fit="cover"
/>

Rounded Image

You can round the Image component, by providing a value to the br prop.

<Image
  h={120}
  w={120}
  src="https://pngimg.com/uploads/globe/globe_PNG100087.png"
  alt="Person Image"
  fit="cover"
  br="full"
/>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Image

Go BackIcon

Up NextInitials