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