Image

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

安装

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

导入

用法

模糊

您可以使用 isBlurred prop 复制图像并使其模糊，以创建模糊效果。

缩放

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

动画加载

Image 组件内置了 skeleton 动画来指示图像正在加载，以及在图像加载完成时的 opacity 动画。

注意：URL 使用 https://app.requestly.io/delay 来模拟缓慢的网络。

带回退的图像

您可以使用 fallbackSrc prop 在以下情况下显示回退图像

• 提供了 fallbackSrc prop。
• src 中提供的图像仍在加载。
• src 中提供的图像加载失败。
• 找不到 src 中提供的图像。

使用 Next.js Image

Next.js 提供了一个优化的 Image 组件，您也可以将其与 HeroUI Image 组件一起使用。

注意：HeroUI 的 Image 组件是 client-side，使用诸如 useState 之类的 Hook 来处理加载状态和动画。如果不需要这些功能，请单独使用 Next.js Image。

插槽

• img: 图像元素的插槽。
• wrapper: 图像包装器，它处理对齐、放置和整体外观。
• zoomedWrapper: 缩放图像的包装器插槽，它避免了图像内容溢出父容器。
• blurredImg: 重复模糊图像的包装器插槽。

API

图像属性

图像事件