图片
用于显示图片
import { Image } from "@chakra-ui/react"
export const ImageBasic = () => (
<Image rounded="md" src="https://bit.ly/dan-abramov" alt="Dan Abramov" />
)
用法
import { Image } from "@chakra-ui/react"<Image src="..." />示例
高度
使用 height 属性更改图片组件的高度。
import { Image } from "@chakra-ui/react"
const Demo = () => {
return (
<Image
height="200px"
src="https://images.unsplash.com/flagged/photo-1572491259205-506c425b45c3"
/>
)
}
圆形
这里是一个如何渲染圆形图片的示例。
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"
/>
)
宽高比
使用 aspectRatio 属性更改图片组件的宽高比。
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"
/>
)
}
适应
默认情况下，图片应用 object-fit: cover。使用 fit 属性更改图片组件的适应方式。
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 宽度和高度
使用 htmlWidth 和 htmlHeight 属性设置图片组件的原始宽度和高度。
import { Image } from "@chakra-ui/react"
const Demo = () => {
return (
<Image
htmlWidth="400px"
htmlHeight="400px"
src="https://i.pravatar.cc/400?u=1"
/>
)
}
Next.js 图片
使用 asChild 属性将图片渲染为 Image 组件的子项。
// import NextImage from "next/image"
<Image asChild>
<NextImage src="..." alt="..." />
</Image>属性
Image 组件支持 img 元素的所有原生属性。