图像

Image 组件用于显示图像，并支持回退。

安装

以上命令仅用于单独安装。如果 @nextui-org/react 已全局安装，则可以跳过此步骤。

导入

用法

模糊

您可以使用 isBlurred 属性来复制图像并模糊它，以创建模糊效果。

缩放

您可以使用 isZoomed 属性使图像在悬停时放大。

动画加载

Image 组件具有内置的 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

图像属性

图像事件