n-image

Display images with lazy loading and preview by using an image component that loads sources only when entering the viewport and enables click-to-enlarge functionality. This simplifies rendering and ensures consistent loading performance in dashboards.

Yes, you can show a fallback image when loading fails by using the fallback-src prop. This error handling mechanism ensures graceful fallbacks, and you can also use optional slots to render custom error content for your gallery.

Create a gallery-style preview by grouping images together within the component interface. This allows users to click and navigate through enlarged images, providing a unified viewing experience for content lists.

Naive-ui supports image lazy loading inside content lists through a dedicated image component. It defers rendering until images enter the viewport, optimizing page performance for long lists of images.

To customize image rendering, you need props such as src, width, height, alt, fallback-src, lazy, and preview-src. Optional slots and toolbar customization provide further flexible UI control.