FxImageLoader

How to get FxImageLoader

import FxImageLoader from 'fontoxml-fx/src/FxImageLoader.jsx'

Type: Component

Loads an image. This is used to create image previews for example. A new load will be initiated when the the remoteId changes.

Props

# Name Type Description
1. children Function

Implement children as a function. The function should return a react component.


  Arguments
# Name Type Description
1. properties Object
  Members

Members

Name Type Description
imageData Object

Contains the properties dataUrl, height and width.

isErrored Boolean

Wether the image is errored

isLoading Boolean

Wether the image is still loading

  Returns

Type: ReactElement

2. [onError] Function

A callback that is called when the image is errored.


  Arguments
# Name Type Description
1. remoteId AssetId

The remote id of the image that errored while loading.

2. error String

The error that occured during loading.

3. [onLoadIsDone] Function

A callback that is called when the image has finished loading.


  Arguments
# Name Type Description
1. imageData Object

Contains the properties dataUrl, height and width.

4. remoteId AssetId

The remote id of the image that needs to be loaded.

5. referrerDocumentId RemoteDocumentId

The referring document.

6. type String

The file type of the image. Which is send to the cms. For example 'web' or 'thumbnail'

Example

// An example on how the `FxImageLoader` can be used.

function ImagePreview() {
	const referrerDocumentId = documentsManager.getRemoteDocumentId(selectionManager.focusedDocumentId);

	return (
		<FxImageLoader referrerDocumentId={referrerDocumentId} remoteId={selectedItem.id} type="web">
			{({ isErrored, isLoading, imageData }) => {
				if (isErrored) {
					return (
						<StateMessage
							connotation="warning"
							title="The image could not be loaded"
							visual="exclamation-triangle"
						/>
					);
				}

				if (isLoading) {
					return <StateMessage title="Loading..." visual={<SpinnerIcon />} />;
				}

				return <ContainedImage src={imageData.dataUrl} />;
			}}
		</FxImageLoader>
	)
}
Was this page helpful?