Function ReactiveImage

Reactively load an Image with access to loading / error state.

Usage in a component

import { ReactiveImage } from 'reactiveweb/image';

Usage in a class

import { use } from 'ember-resources';
import { ReactiveImage } from 'reactiveweb/image';

class Demo {
  @use imageState = ReactiveImage('https://path.to.image');
}

Reactive usage in a class

import { tracked } from '@glimmer/tracking';
import { use } from 'ember-resources';
import { ReactiveImage } from 'reactiveweb/image';

class Demo {
  @tracked url = '...';
  @use imageState = ReactiveImage(() => this.url);
}
  • ReactiveImage(...args): {
        get isError(): boolean;
        get isLoading(): boolean;
        get isResolved(): boolean;
        get value(): unknown;
    }

  • Parameters

    • Rest...args: [maybeUrl: string | (() => string)]

    Returns {
        get isError(): boolean;
        get isLoading(): boolean;
        get isResolved(): boolean;
        get value(): unknown;
    }

    • get isError(): boolean
    • get isLoading(): boolean
    • get isResolved(): boolean
    • get value(): unknown

Settings

Member Visibility