Component field guide

WelkImage

A native image inside an uneven comic frame. Network mode replaces a failed image with a fallback and displays an Unable to load image status label. Asset mode leaves image errors to native behavior. Supply dimensions to reserve layout space.

Usage

import { WelkImage } from "@welkui/react";
import comic from "./comic.jpg";

<WelkImage variant="asset" src={comic} alt="Comic artwork"
  width={400} height={220} />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

• network: fallback-aware image (default).
• asset: native loading/error behavior for bundled artwork.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

Local asset

Bundled artwork in the irregular frame. Set alt text and reserve space with dimensions.

Key propsvariant="asset" src={comic}

Network mode

Paste a public image URL above the preview. Changes load immediately; inaccessible or invalid images show a fallback and an error message.

Image URL

Key propsvariant="network" src={url}

Load failure and fallback

A deliberately invalid image demonstrates fallbackSrc and the visible error status.

Key propssrc={brokenImage} fallbackSrc={comic}

Usage notes and accessibility

• Use alt text that explains the image's purpose. Use an empty alt for decorative images and put essential information in surrounding text too.
• Reserve layout space with width/height and use a responsive style where needed. Native loading=lazy can defer non-critical images.
• Network mode falls back to bundled artwork or fallbackSrc and shows an error label. Asset mode keeps native error handling. Paste a public image URL into the network example to try it; the image host must allow access from your browser.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

Native props and refs

Inherits native image props except src, alt and children, including width, height, loading, decoding, onLoad, onError, className and style; forwards an image ref.