FxImageLoader

Type: React component

How to get FxImageLoader?

JavaScript

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

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

Other

// 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>
	)
}

Props

  1. children

    (Required)

    Type: Function

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

    Arguments

    Returns

  2. onError

    (Optional)

    Type: Function

    A callback that is called when the image is errored.

    Arguments

    Returns

    Default value

  3. onLoadIsDone

    (Optional)

    Type: Function

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

    Arguments

    Default value

  4. remoteId

    (Required)

    Type: AssetId

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

  5. referrerDocumentId

    (Required)

    The referring document.

  6. type

    (Required)

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