Image

Image accepts an ImageSource from an SF Symbol, bundle asset, URL, or encoded byte array.

The same type is used by control icons on buttons, sliders, text fields, menus, toolbars, tabs, and map pins. Those compact icon slots accept local symbol, bundle, auto-resolved, and data sources. URLs are reserved for Image, where loading can be asynchronous and use placeholders and fallbacks.

var artwork = new Image
{
    Source = ImageSource.Url(album.ArtworkUrl),
    Placeholder = ImageSource.Symbol("photo"),
    Fallback = ImageSource.Symbol("exclamationmark.triangle"),
    Width = 160,
    Height = 160,
    Stretch = Stretch.UniformToFill,
    CornerRadius = 18,
    FadesIn = true
};

Remote sources load asynchronously. Give them explicit dimensions or a bounded parent slot so the layout does not depend on an image that has not arrived. Placeholder is shown during the request, and Fallback replaces it if loading fails. Both are intended for local symbols or bundle images.

Stretch can preserve the aspect ratio with Uniform, crop with UniformToFill, fill both dimensions, or retain the natural size. Aspect-fill clips the image to its bounds.

SF Symbols

Use ImageSource.Symbol when you specifically want a symbol. A plain string automatically tries an SF Symbol first and then a bundle asset.

var speaker = new Image
{
    Source = ImageSource.Symbol("speaker.wave.3.fill"),
    SymbolSize = 30,
    SymbolWeight = FontWeight.Semibold,
    SymbolColors = { Colors.Blue },
    SymbolValue = 0.75
};

One SymbolColors entry uses the hierarchical rendering style; multiple colors use palette rendering. PrefersMulticolor requests the symbol's built-in multicolor rendition. SymbolValue drives variable symbols such as signal or volume levels when the selected symbol supports it.

SymbolEffect applies a continuing symbol effect. Call PlaySymbolEffect for one response to an event:

speaker.PlaySymbolEffect(SymbolEffect.Bounce);

Symbol availability and supported effects vary by iOS version. Choose symbols appropriate to the app's deployment target and test fallbacks on the oldest supported release.

Custom loading

The default URL loader uses HTTP. Register another IImageLoader through SkeleApplicationBuilder.UseImageLoader when the app needs authenticated requests, caching, or a shared image pipeline.