AngularLynx

    <image>

    Displays a PNG, JPEG, WebP, GIF or BMP image, like an <img>. It loads bundled assets, remote URLs and base64 data URIs.

    element-imagesrc/app/app.ts

    Usage

    src/app/avatar.ts
    import { Component, signal } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import logo from '../assets/logo.png';

@Component({
  selector: 'app-avatar',
  imports: [LYNX_ELEMENTS],
  template: `
    <image [src]="logo" mode="aspectFit" style="width: 64px; height: 64px;" />
    <image
      src="https://example.com/photo.jpg"
      mode="aspectFill"
      style="width: 200px; height: 150px;"
      (binderror)="failed.set(true)"
    />
  `,
})
export class Avatar {
  readonly logo = logo;
  readonly failed = signal(false);
}

    Import LYNX_ELEMENTS in your component (see Elements).

    Warning

    Give every <image> a width and height. Unlike <img>, it has no size of its own, and Lynx doesn't load an image whose box is 0×0.

    Attributes

    AttributeTypeDefaultDescription
    srcstring—Image to show: an imported asset, an http/https URL or a base64 data URI. SVG doesn't work here: use <svg>.
    mode'scaleToFill' | 'aspectFit' | 'aspectFill' | 'center''scaleToFill'How the image fills its box: stretched, fitted inside (like object-fit: contain), covering it (like cover), or not scaled. Set it on every image: CSS object-fit doesn't work.
    placeholderstring—Image shown while src loads. Takes the same values as src.
    auto-sizebooleanfalseAfter loading, an image missing a width or height sizes itself to keep the image's aspect ratio.
    blur-radiusstring—Blurs the image itself, e.g. '10px'. To blur what's behind an element, use <blur-view>.
    tint-colorstring—iOS and Android. Paints every non-transparent pixel this color, for single-color icons.
    cap-insetsstring—iOS and Android. Nine-slice stretching: four insets (top, right, bottom, left) that keep their size while the middle stretches.
    cap-insets-scalenumber1iOS and Android. Scales the cap-insets values.
    autoplaybooleantrueiOS and Android. Starts an animated image as soon as it loads.
    loop-countnumber0iOS and Android. How many times an animated image plays. 0 loops forever.
    defer-src-invalidationbooleanfalseiOS and Android. Keeps showing the old image until a new src has loaded, so there's no blank flash.
    prefetch-width, prefetch-heightstring'0px'iOS and Android. Loads the image even while its box is still 0×0. Lynx marks these as deprecated.
    image-config'ARGB_8888' | 'RGB_565''ARGB_8888'Android only. 'RGB_565' uses half the memory but drops transparency.

    Plus the common attributes, such as id, class and style.

    Events

    Read the payload from $event.detail (see Handling taps and events).

    EventdetailDescription
    bindload{ width: number; height: number }The image loaded. The sizes are the image's own, in pixels.
    binderror{ errMsg: string; error_code: number; lynx_categorized_code: number }The image failed to load.
    bindstartplay—iOS and Android. An animated image starts playing.
    bindcurrentloopcomplete—iOS and Android. An animated image finished one loop.
    bindfinalloopcomplete—iOS and Android. An animated image finished all its loops. It never fires without loop-count.

    Plus the common events, such as bindtap.

    Methods

    These UI methods (Glossary) control animated images on iOS and Android. Call them with invoke() on the element (see Call element methods).

    MethodParametersDescription
    pauseAnimation—Pauses the animation and keeps its loop count.
    resumeAnimation—Resumes a paused animation.
    stopAnimation—Stops the animation and resets its loop count.
    startAnimate—Deprecated. Restarts the animation from the start: use resumeAnimation.
    import { Component, ElementRef, viewChild } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-spinner',
  imports: [LYNX_ELEMENTS],
  template: `
    <image
      #spinner
      src="https://example.com/spinner.gif"
      style="width: 48px; height: 48px;"
      (bindtap)="pause()"
    />
  `,
})
export class Spinner {
  readonly spinner = viewChild.required('spinner', { read: ElementRef });

  pause(): void {
    this.spinner().nativeElement.invoke?.('pauseAnimation');
  }
}