Picture

Pictureは、picture要素を使用し、異なる表示やデバイスのシナリオに応じて代替の画像を提供するコンポーネントです。

<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>

使い方

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>

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"
/>

カスタムメディアクエリを使用する

<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"
/>

ソートを無効にする

デフォルトでは、ソースのminW と maxW によってソートされます。このソートを無効にする場合は、enableSortingを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	デフォルト	型 / 説明
`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	デフォルト	型 / 説明
`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.

類似のコンポーネント

Imageは、画像を表示するコンポーネントです。

QrCodeは、QRコードを表示するコンポーネントです。

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。

AspectRatioは、アスペクト比を維持したビデオやマップなどを埋め込むためのコンポーネントです。

Avatarは、ユーザーを表すプロフィール写真やイニシャルのアイコンを表示するコンポーネントです。

使用しているコンポーネント・フック

Imageは、画像を表示するコンポーネントです。