Image

The Image component allows users to display static or interactive images on a dashboard. Beyond simple visualization, the Image component can also be configured to trigger actions on associated components when clicked, making it a versatile tool for branding, navigation, and interactivity.

Images can be added from local files or by providing a URL, and styling options such as shadows, hover effects, and glow highlights are supported.

Best Situations to Use

Use the Image component when you want to:

  • Display logos, icons, or visual assets in a dashboard.

  • Add interactive navigation elements (e.g., image buttons linking to other views).

  • Create visual callouts that trigger actions in associated components.

  • Enrich the dashboard design with thematic images or infographics.

Not Recommended for:

  • Displaying large datasets or charts (use chart components instead).

  • Heavy image-based dashboards where performance may be impacted.

Properties

Background

  • Shadow: Enable or disable a shadow effect behind the image.

  • Shadow Color: Choose the hue for the shadow.

  • Shadow Transparency: Adjust the opacity level of the shadow.

General

  • Component Name: Assign a unique identifier.

  • Left / Top: Define the position of the image on the dashboard canvas.

  • Height / Width: Set the dimensions of the image.

  • Initial Visibility: Toggle whether the image is visible on first preview.

  • Browse Image: Upload an image directly from your computer or paste an image URL.

  • Rollover Glow: Enable hover effect to highlight the image with a glow.

  • Glow Color: Define the glow border color when the user hovers over the image.

Example Configurations

  1. Static Image Display

    • Upload a logo to serve as a dashboard header.

  2. Interactive Image with Action

    • Configure the image to trigger filter updates or navigation when clicked.

  3. Hover Effect Image

    • Enable Rollover Glow with a blue glow to emphasize interactivity.

Notes

  • For best results, use optimized images (PNG, SVG, JPG) to avoid performance issues.

  • Hover glow should be used to indicate clickable or interactive images.

  • Pair images with actions or filters to create intuitive, visual navigation in dashboards.

PreviousH-SliderNextInfo Button