圖片 (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 元件是 client-side，使用像 useState 這樣的 Hook 來處理加載狀態和動畫。如果不需要這些功能，請單獨使用 Next.js 的 Image。

插槽

• img: 圖片元素的插槽。
• wrapper: 圖片包裝器，它處理對齊、放置和整體外觀。
• zoomedWrapper: 縮放圖片的包裝器插槽，它可以避免圖片內容溢出父容器。
• blurredImg: 複製的模糊圖片的包裝器插槽。

API

圖片屬性

圖片事件