Image

The RhImage component facilitates developers in presenting images with a multitude of configuration options.

Usage

Once installed, you can import the RhImage component into your React application:

copy

import {RhImage} from "@rhythm-ui/react"

Then, you can use the RhImage component in your JSX code:

copy

<RhImage
  src="https://i.ibb.co/5KQvSTJ/Pngtree-not-found-5408094.png"
  alt="Image-description"
  width="100px"
  height="100px"
  contain={true}
  caption="Caption is Here"
  aspectRatio="auto"
/>

Image Props

Name	Type	Default	Description
src	string	https://bit.ly/3mYW2vQ	Set image url
alt	string		Set alt text for image
height	string		Sets height of image
width	string		Sets width of image
contain	boolean		Set object-fit to contain
caption	string		Show caption below the image
aspectRatio	string		Set aspect ratio of image
className	string		Additional CSS classes to apply to the RhImage.