Image

Image is a component that displays images.

<Image
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="ドラゴンボール"
  boxSize="xl"
/>

Usage

import { Image } from "@yamada-ui/react"

import { Image } from "@/components/ui"

import { Image } from "@workspaces/ui"

<Image />

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`fit`	-	`"-moz-initial" \| "contain" \| "cover" \| "fill" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "scale-down" ...` The CSS `object-fit` property.

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`fit`	-	`"-moz-initial" \| "contain" \| "cover" \| "fill" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "scale-down" ...` The CSS `object-fit` property.

Picture is a component that uses the picture element to provide alternative images for different display and device scenarios.

AspectRatio is a component for embedding things like videos and maps while maintaining the aspect ratio.

Icon is a general icon component that can be used in your projects.

QrCode is a component that displays a QR code.

Avatar is a component that displays a profile picture or an icon with initials representing a user.

Picture is a component that uses the picture element to provide alternative images for different display and device scenarios.