Image Resource

Image resource provide a simple way to load images using promises, and patch IE naturalWidth and naturalHeight for SVG.

Example:

ImageResource.load('my-image.svg').then((image) => {
  document.body.append(image.image);
  console.log(image.naturalWidth, image.naturalHeight);
});

Documentation

load(source: string): Promise<ImageResource>;

Load an image from an url. Return a promise resolved when image loading is complete.

addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
dispatchEvent(event: Event): boolean;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;

It's possible to bind events like any other EventTarget.

readonly naturalWidth: number;
readonly naturalHeight: number;

It's possible to read the natural size of the image (working on IE with SVG too).

public image: HTMLImageElement;

Finally, it's possible to acces to the original Image element through imageResource.image