Image Element

The Image element renders bitmap content inside a UI script via the shared element options.

Use ui.addImage() in your UI script (win is the UI script's global object).

ui.addImage(options);

Table of Contents

• Shared Options
• Image Element Options
  • path
  • preserveAspectRatio
  • scaleMargins
  • tile
• Example
• Supported Image Formats

Shared Options

Refer to:

• General Element Options for layout and interaction.
• General Image Options for shared image processing fields.
• General Tooltip Options for tooltip appearance and behavior.
• Mouse Events Callback for mouse interaction and cursor settings.

Image Element Options

path

• Type: string
• Default: ""
• Description: Path to the image file.

preserveAspectRatio

• Type: string
• Default: "stretch"
• Description: Controls how the image maintains its aspect ratio.

Valid values

• "stretch"
• "preserve"
• "crop"

scaleMargins

• Type: number[]
• Default: []
• Description: 9-slice style margins for scalable image regions.

Syntax

• [left, top, right, bottom]

tile

• Type: boolean
• Default: false
• Description: Tiles the image to fill the element area.

Example

ui.addImage({
    id: "logo",
    x: 20,
    y: 20,
    width: 180,
    height: 180,
    path: "./assets/logo.png",
    preserveAspectRatio: "preserve",
    imageAlpha: 230,
    imageTint: "rgba(255,255,255,0.95)",
    imageFlip: "none"
});

Supported Image Formats

• PNG
• JPEG
• BMP
• GIF
• TIFF
• ICO