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

    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)

    Type: String

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