Content Image

A lazy, flicker-free image for rendered content. It defers loading until it scrolls near the viewport (via IntersectionObserver), shows a spinner placeholder, fades in on load, and — by default — opens a full-screen, zoomable lightbox on click. It extends the native <img> props, so src, alt, className, loading, etc. all pass straight through; URLs are used as-is (rewrite them upstream, e.g. with the markdown renderer's urlTransform). Inside MarkdownRenderer, every image is rendered through this component.

Import

1import { ContentImage } from "@yuhuanowo/yunui/content";

Example

Click the image to open the lightbox.

ContentImage

PreviewCode

Props

Beyond the prop below, ContentImage forwards all native <img> attributes (src, alt, className, loading, onLoad, onError, …).