Function ReactiveImage

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

Usage in a component

import { ReactiveImage } from 'reactiveweb/image';
<template>
  {{#let (ReactiveImage 'https://path.to.image') as |state|}}
     {{#if imgState.isResolved}}
       <img src={{imgState.value}}>
     {{/if}}
  {{/let}}
</template>
Copy

Usage in a class

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

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

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);
}
Copy