图片
用于显示图片。
import { Image } from "@chakra-ui/react"
export const ImageBasic = () => (
<Image rounded="md" src="https://bit.ly/dan-abramov" alt="Dan Abramov" />
)
用法
¥Usage
import { Image } from "@chakra-ui/react"<Image src="..." />示例
¥Examples
高度
¥Height
使用 height 属性更改图片组件的高度。
¥Use the height prop to change the height of the image component.
import { Image } from "@chakra-ui/react"
const Demo = () => {
return (
<Image
height="200px"
src="https://images.unsplash.com/flagged/photo-1572491259205-506c425b45c3"
/>
)
}
圆形
¥Circular
以下是如何渲染圆形图片的示例。
¥Here's an example of how to render a circular image.
import { Image } from "@chakra-ui/react"
export const ImageCircular = () => (
<Image
src="https://bit.ly/naruto-sage"
boxSize="150px"
borderRadius="full"
fit="cover"
alt="Naruto Uzumaki"
/>
)
宽高比
¥Aspect Ratio
使用 aspectRatio 属性更改图片组件的宽高比。
¥Use the aspectRatio prop to change the aspect ratio of the image component.
import { Image } from "@chakra-ui/react"
const Demo = () => {
return (
<Image
src="https://wallpapercave.com/uwp/uwp4261619.png"
alt="Naruto vs Sasuke"
aspectRatio={4 / 3}
width="300px"
/>
)
}
适合
¥Fit
默认情况下，图片应用 object-fit: cover。使用 fit 属性更改图片组件的适配度。
¥By default, the image applies object-fit: cover. Use the fit prop to change
the fit of the image component.
import { Image } from "@chakra-ui/react"
export const ImageWithFit = () => (
<Image
border="1px solid red"
rounded="md"
h="200px"
w="300px"
fit="contain"
src="https://bit.ly/dan-abramov"
/>
)
HTML 宽度和高度
¥HTML Width and Height
使用 htmlWidth 和 htmlHeight 属性设置图片组件的原生宽度和高度。
¥Use the htmlWidth and htmlHeight props to set the native width and height of
the image component.
import { Image } from "@chakra-ui/react"
const Demo = () => {
return (
<Image
htmlWidth="400px"
htmlHeight="400px"
src="https://i.pravatar.cc/400?u=1"
/>
)
}
Next.js 图片
¥Next.js Image
使用 asChild 属性将图片渲染为 Image 组件的子元素。
¥Use the asChild prop to render the image as a child of the Image component.
// import NextImage from "next/image"
<Image asChild>
<NextImage src="..." alt="..." />
</Image>属性
¥Props
Image 组件支持 img 元素的所有原生属性。
¥The Image component supports all native props for the img element.