Picture

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

<Picture>
  <Source
    srcSet="https://dragon-ball-official.com/assets/img/intro/intro_4.png"
    media="md"
  />
  <Source
    srcSet="https://dragon-ball-official.com/assets/img/intro/intro_3.png"
    media="lg"
  />
  <Source
    srcSet="https://dragon-ball-official.com/assets/img/intro/intro_2.png"
    media="xl"
  />
  <Image
    src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
    alt="Dragon Ball"
    maxW="full"
    w="xl"
  />
</Picture>

Usage

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

import { Picture, Source, Image } from "@/components/ui"

import { Picture, Source, Image } from "@workspaces/ui"

<Picture>
  <Source />
  <Image />
</Picture>

Use sources

<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="Dragon Ball"
  maxW="full"
  sources={[
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_2.png",
      media: "xl",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_3.png",
      media: "lg",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_4.png",
      media: "md",
    },
  ]}
  w="xl"
/>

Use Custom Media Query

<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="Dragon Ball"
  maxW="full"
  sources={[
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_6.png",
      media: "(max-width: 480px)",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_5.png",
      maxW: "3xl",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_3.png",
      maxW: "976px",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_2.png",
      maxW: 1280,
    },
  ]}
  w="xl"
/>

Disable Sorting

By default, it is sorted by the minW and maxW of the source. To disable this sorting, set enableSorting to false.

<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="Dragon Ball"
  enableSorting={false}
  maxW="full"
  sources={[
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_3.png",
      media: "lg",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_2.png",
      media: "(max-width: 1280px)",
    },
  ]}
  w="xl"
/>

Props

Picture

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.
`enableSorting`	`true`	`boolean` If `true`, the sources will be sorted by the `minW` and `maxW` properties.
`fit`	-	`"-moz-initial" \| "contain" \| "cover" \| "fill" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "scale-down" ...` The CSS `object-fit` property.
`pictureProps`	-	`HTMLStyledProps<"picture">` The props for the picture element.
`sources`	-	`PictureSource[]` The sources for the picture element.

Source

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.
`media`	-	`AnyString \| ThemeTokens["breakpoints"]` The media query for the source.

Similar Components

Image is a component that displays images.

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.

Uses Components & Hooks

Image is a component that displays images.