图片
Image 组件用于显示图片，并支持备用图片。
安装
npx nextui-cli@latest add image
以上命令仅用于单独安装。如果 @nextui-org/react 已全局安装，则可以跳过此步骤。
导入
使用
模糊
您可以使用 isBlurred 属性复制图像并将其模糊以创建模糊效果。
缩放
您可以使用 isZoomed 属性使图像在悬停时放大。
动画加载
图像组件内置了 skeleton 动画以指示图像正在加载，以及图像加载时的 opacity 动画。
注意:
URL使用https://app.requestly.io/delay模拟慢速网络。
带有备用图片的图片
您可以使用 fallbackSrc 属性在以下情况下显示备用图片：
- 提供
fallbackSrc属性。 - 在
src中提供的图片仍在加载。 - 在
src中提供的图片加载失败。 - 在
src中提供的图片未找到。
使用 Next.js Image
Next.js 提供了一个优化的 Image 组件，您也可以在 NextUI 的 Image 组件中使用它。
注意: NextUI 的
Image组件是客户端的，使用useState等钩子来处理加载状态和动画。如果不需要这些功能，请单独使用 Next.js 的Image。
插槽
- img: 图片元素的插槽。
- wrapper: 图片包装器，它处理对齐、放置和整体外观。
- zoomedWrapper: 放大图片的包装器插槽，它避免图片内容溢出父容器。
- blurredImg: 复制的模糊图片的包装器插槽。
API
图片属性
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| src | 字符串 | 图片源。 | - |
| srcSet | 字符串 | 图片的 srcSet 属性。 | - |
| sizes | 字符串 | 图片的 sizes 属性。 | - |
| alt | 字符串 | 图片的 alt 属性。 | - |
| width | 数字 | 图片的宽度。 | - |
| height | 数字 | 图片的高度。 | - |
| radius | none | sm | md | lg | full | 图片的圆角。 | xl |
| shadow | none | sm | md | lg | 图片的阴影。 | none |
| loading | eager | lazy | 用于图片的加载策略。 | - |
| fallbackSrc | 字符串 | 备用图片源。 | - |
| isBlurred | 布尔值 | 图片是否应该在背景中有一个重复的模糊图像。 | false |
| isZoomed | 布尔值 | 图片是否应该在悬停时放大。 | false |
| removeWrapper | 布尔值 | 是否移除包装元素。这将导致图片作为父元素的直接子元素呈现。如果将此属性设置为 true，则骨架和缩放效果都不会起作用。 | false |
| disableSkeleton | 布尔值 | 图片是否应该在加载时禁用骨架动画。 | false |
| classNames | Record<"img"｜ "wrapper"｜ "zoomedWrapper"｜ "blurredImg", string> | 允许为图像插槽设置自定义类名。 | - |
图像事件
| 属性 | 类型 | 描述 |
|---|---|---|
| onLoad | ReactEventHandler<HTMLImageElement> | 图像加载时调用的处理程序。 |
| onError | () => void | 图像加载失败时调用的处理程序。 |
