Image

ic.Image displays a raster or vector image in your figures (PNG, JPG, GIF, WebP, SVG, BMP). You point it at a file path, URL, or ic.Asset, set the dimensions and fit mode, and it handles the rest. It fires events when clicked, loaded, or when loading fails, so you can build interactive image-based UIs or handle error states gracefully.

Size and object fit

Width and Height set the container dimensions in pixels (or as CSS strings like "100%"), while ObjectFit controls how the image fills that container. contain fits the whole image within the box (the default), cover fills the box and crops the overflow, fill stretches to match exactly, none keeps the original size, and scale-down picks whichever of contain or none is smaller.

Border radius and opacity

BorderRadius rounds the corners of the image container. A value equal to half the width/height turns it into a circle, which is useful for avatars or profile pictures. Opacity fades the image from fully visible (1) to fully transparent (0), letting you layer it over other content or create a subtle watermark effect.

Events

Image fires three events. Clicked fires when the user clicks on the image (this also makes the image focusable and keyboard-accessible). Loaded fires after the image finishes loading successfully, and Error fires if it fails. In MATLAB, attach listeners with addlistener and read the payload from evt.Data.

Custom styling

Every component exposes a .css property for instance-level CSS overrides from MATLAB. In this example, we make the image a brushed-metal card.

img = ic.Image("Source", "pikachu.png", ...
    "Width", 220, "Height", 220, ...
    "BorderRadius", 16);

img.css.style(".ic-image", ...
    "border", "1px solid rgba(255,255,255,0.5)", ...
    "border_radius", "16px", ...
    "background", ["linear-gradient(160deg, " ...
        "#d4d4d8, #a1a1aa 30%, #d4d4d8 50%, " ...
        "#a1a1aa 70%, #d4d4d8)"], ...
    "padding", "12px", ...
    "box_shadow", ["0 1px 0 rgba(255,255,255,0.6) inset, " ...
        "0 12px 40px rgba(0,0,0,0.25), " ...
        "0 2px 4px rgba(0,0,0,0.15)"] );

img.css.style(".ic-image::after", ...
    "content", "''", ...
    "position", "absolute", ...
    "inset", "0", ...
    "background", ["linear-gradient(115deg, " ...
        "rgba(255,255,255,0) 0%, " ...
        "rgba(255,255,255,0) 35%, " ...
        "rgba(255,255,255,0.5) 45%, " ...
        "rgba(255,255,255,0.8) 50%, " ...
        "rgba(255,255,255,0.5) 55%, " ...
        "rgba(255,255,255,0) 65%, " ...
        "rgba(255,255,255,0) 100%)"], ...
    "pointer_events", "none", ...
    "border_radius", "16px");