Skip to main content

Image Component

1. Introduction​

The Image component is a versatile and essential UI element that allows developers to display images in their applications. It supports multiple image sources, including media libraries, URLs, and SVGs, making it highly adaptable for various use cases. This component is ideal for enhancing the visual appeal of an application, providing context, or conveying information through imagery.

Purpose and Use Cases​

  • Purpose: The Image component is used to display static or dynamic images in an application.
  • Primary Use Cases:
    • Displaying product images, banners, or logos.
    • Adding visual elements to enhance the design and user experience.
    • Using SVGs for scalable and interactive graphics.
    • Dynamically loading images from external URLs or media libraries.

Benefits​

  • Flexible Source Options: Supports media library, URL, and SVG inputs.
  • Customizable: Offers extensive styling options to match the application's design.
  • Improved UX: Enhances the visual appeal and usability of the application.
  • Cross-Platform Compatibility: Works seamlessly on desktop, tablet, and mobile devices.

2. Properties​

The Image component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Source​

  • Description: Specifies the source of the image.
  • Purpose: Determines where the image is loaded from.
  • Options:
    • Media Library: Select an image stored in the media library.
    • URL:
      • URL: Reference to the online image URL.
      • Title: Provide a title for the image loaded from the URL.
    • SVG:
      • SVG: Descriptive code of the SVG.
      • Title: Provide a title for the SVG.
  • Required/Optional: Required

Icon Key​

  • Description: Specifies the icon key for the image (if applicable).
  • Purpose: Used for referencing predefined icons.
  • Default: "web"
  • Required/Optional: Optional

Type​

  • Description: Defines the behavior of the image when clicked.
  • Purpose: Determines the action triggered by the image.
  • Options:
    • Click: Triggers an independent action.
    • Submit Form: Validates the form before triggering the action. If the form is incomplete or invalid, the action is blocked.
  • Required/Optional: Optional

Tooltip​

  • Description: Text displayed when the user hovers over the image.
  • Purpose: Provides additional context or guidance for the image.
  • Required/Optional: Optional

Enabled​

  • Description: Determines whether the image is active or disabled.
  • Purpose: Controls the image's availability to users.
  • Default: ON
  • Required/Optional: Optional

3. Style​

The Image component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the image's dimensions.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the image (default: 0).
  • Fixed Position: Locks the image's position on the screen (default: OFF).
  • Hidden: Hides the image from view (default: OFF).

Border​

  • Reset: Resets border settings to default.
  • Normal:
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).
  • On Hover:
    • Same properties as "Normal" but applied when the image is hovered.

Padding​

  • Reset: Resets padding settings to default.
  • Normal:
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.
  • On Hover:
    • Same properties as "Normal" but applied when the image is hovered.

Background​

  • Reset: Resets background settings to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the image is hovered.

Shadow​

  • Reset: Resets shadow settings to default.
  • Normal:
    • Color: Hexadecimal color code with a color picker (default: none).
    • Offset X: Horizontal spacing in pixels.
    • Offset Y: Vertical spacing in pixels.
    • Blur Radius: The amount of blur applied to the shadow.
    • Spread Radius: The size of the shadow spread.
    • Inset: Applies the shadow inside the element (default: OFF).
  • On Hover:
    • Same properties as "Normal" but applied when the image is hovered.

Cursor​

  • Reset: Resets cursor settings to default.
  • Options: Auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, wait, all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, neswe-resize, nesw-resize, zoom-in, zoom-out.

Icon​

  • Reset: Resets icon settings to default.
  • Normal:
    • Icon Color: Hexadecimal color code with a color picker.
    • Icon Size: Icon size in pixels.
  • On Hover:
    • Same properties as "Normal" but applied when the image is hovered.

4. Best Practices for UI/UX​

When and Why to Use​

  • Use the Image component to display visual content that enhances the application's design or provides context.
  • Ideal for responsive designs where images need to adapt to different screen sizes.
  • Use tooltips to provide additional context for images that may not be self-explanatory.

Effective Scenarios​

  • Desktop: Use for banners, product images, or visual indicators.
  • Tablet/Smartphone: Use for responsive designs with optimized image sizes.

Tips for Optimal Use​

  • Ensure images are optimized for fast loading to improve performance.
  • Use consistent styling across the application for a cohesive design.
  • Avoid overloading the interface with too many images, as it may distract users.

5. Security Considerations​

Potential Risks​

  • External Resources: If the image is loaded from an external URL, ensure the source is trustworthy to avoid malicious content.
  • SVG Content: Validate and sanitize SVG code to prevent injection attacks.

Best Practices​

  • Use HTTPS for external resources to ensure secure communication.
  • Validate all user inputs before triggering actions.
  • Escape any dynamic content displayed in tooltips to prevent XSS (Cross-Site Scripting) attacks.