Workspace
ImagePreview
An image surface with loading, error and pointer zoom
Figure 1 — the revenue dashboard
Usage
import { ImagePreview } from "@gpuixui/media";
<ImagePreview
src={bytesReady ? "data:image/png;base64,…" : ""}
alt="The dashboard screenshot"
status={fetchFailed ? "error" : bytesReady ? "loaded" : "loading"}
caption="Figure 1 — the revenue dashboard"
onRetry={() => refetch()}
/>;API
| Prop | Type | Default |
|---|---|---|
src | string (required) | — (a blank or non-text value paints the error state) |
alt | string (required) | — (a blank or non-text value reads as "Picture") |
status | ImagePreviewStatus | "error" for blank src, else "loaded" |
caption | string | — |
loadingLabel | string | "Loading" |
errorLabel | string | "Could not load image" |
retryLabel | string | "Retry" |
onRetry | () => void | — |
width / height | number | 240 / 160 |
zoom | boolean | true |
scale | number | ImageZoom's 1.6 |
radius | number | theme.radius.md |
className | string | — |
Edit this page on GitHubpackages/media/docs/image-preview.mdx