Image

Used to display images

import { Image } from '@fidely-ui/react'

export const ImageBasic = () => {
  return (
    <Image rounded="md" src="https://i.pravatar.cc/250?img=10" alt="John Doe" />
  )
}

Usage

import { Image } from '@fidely-ui/react'

<Image />

Examples

Height

Use the height prop to change the height of the image component.

import { Image } from '@fidely-ui/react'

export const ImageHeight = () => {
  return (
    <Image
      height={'450px'}
      src="https://i.pravatar.cc/250?img=10"
      alt="John Doe"
    />
  )
}

Circular

An example of how to render a circular image to look like avatar.

import { HStack, Image } from '@fidely-ui/react'

export const ImageCircular = () => {
  return (
    <HStack gap={3}>
      <Image
        boxSize="150px"
        borderRadius="full"
        fit="cover"
        src="https://i.pravatar.cc/250?img=10"
        alt="John Doe"
      />

      <Image
        boxSize="150px"
        rounded={'full'}
        fit="cover"
        src="https://i.pravatar.cc/250?img=12"
        alt="John Doe"
      />
    </HStack>
  )
}

HTML Width and Height

Use the htmlWidth and htmlHeight props to set the native width and height of the image component.

import { Image } from '@fidely-ui/react'

export const ImageWithHeight = () => {
  return (
    <Image
      htmlWidth="300px"
      htmlHeight="300px"
      src="https://i.pravatar.cc/400?u=14"
    />
  )
}

Aspect Ratio

Use the aspectRatio prop to change the aspect ratio of the image component.

import { Image } from '@fidely-ui/react'

export const ImageAspectRatio = () => {
  return (
    <Image
      aspectRatio={4 / 3}
      width="350px"
      src="https://i.pravatar.cc/400?u=18"
      alt=""
    />
  )
}

Next.js Image

Use the asChild prop to render the image as a child of the Image component.

import NextImage from 'next/image'
;<Image asChild>
  <NextImage src="..." alt="..." />
</Image>

Props

The Image component supports all native props of HTML image.