Image

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

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

用法

模糊效果

可以使用 isBlurred 属性复制图像并对其进行模糊处理以创建模糊效果。

缩放效果

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

动画加载

Image 组件内置了骨架屏动画来指示图像正在加载，并在图像加载时具有 opacity 淡入动画。

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

带回退的图像

可以在以下情况下使用 fallbackSrc 属性来显示回退图像：

• 提供了 fallbackSrc 属性。
• src 中提供的图像仍在加载。
• src 中提供的图像加载失败。
• 未找到 src 中提供的图像。

与 Next.js Image 结合使用

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

注意：HeroUI 的 Image 组件是 客户端 组件，它使用像 useState 这样的钩子来处理加载状态和动画。如果不需要这些功能，请单独使用 Next.js 的 Image 组件。

插槽 (Slots)

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

API

Image 属性

Image 事件