Image

import { AXImageModule } from '@acorex/components/image';

Image component blends efficiency and aesthetics, offering lazy and priority loading for optimized performance. It features an overlay mode for visual enhancement, coupled with disabled state management for user interaction control. Advanced error handling and an empty state feature ensure seamless display and user experience, even when images are not available.

Overview

In this section, you can test different options of this component and see the output in real time

OverlayMode

Hover

Overlay

Lazy

Priority

Usage

A simple example of using ax-image

Preview

Code

Overlay

The ax-overlay property in the Image component provides a color overlay, enhancing image aesthetics and text readability, perfect for diverse design needs.

Preview

Code

Loading and placeholder

You can utilize the Image component's lazy and priority loading for efficient image rendering with ax-loading, along with a placeholder feature that displays temporary visuals or text with ax-placeholder to ensuring a seamless user experience.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-image-overlay-color	rgb(0 0 0 / 0.75)	defines the color of the overlay applied to images. It is typically used to create a visual effect, such as darkening or tinting the image, to enhance readability of overlaid text or for aesthetic purposes.