Picture

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

Source @yamada-ui/image

Import

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

Copied!

Usage

The media in sources refers to the tokens of breakpoints in the theme. It is also possible to set any media.

Yamada UI uses @media(max-width) media queries for responsive design by default. If you prefer to use @media(min-width) media queries, please see Customize Config.

Editable example

<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="ドラゴンボール"
  boxSize="xl"
  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",
    },
  ]}
/>

Copied!

Alternatively, you can set children.

Editable example

<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="ドラゴンボール"
    boxSize="xl"
  />
</Picture>

Copied!

Using Custom Media

To use custom media, set a string to media, or set a string or number to minW or maxW.

Editable example

<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="ドラゴンボール"
  boxSize="xl"
  sources={[
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_5.png",
      media: "(max-width: 480px)",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_5.png",
      maxW: "4xl",
    },
    {
      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,
    },
  ]}
/>

Copied!

Disabling Sorting

To disable sorting, set enableSorting to false. The default is true.

By default, the source elements are automatically sorted in ascending order of media conditions. This is because the picture element selects the source elements whose media conditions are determined to be true in order from the top, and it is necessary to describe the media conditions with smaller values first.

Editable example

<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="ドラゴンボール"
  boxSize="xl"
  enableSorting={false}
  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)",
    },
  ]}
/>

Copied!

Edit this page on GitHub

PreviousNativeImage NextIcon