Fx Image Loader
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
children
(Required)
Type: Function
Implement children as a function. The function should return a react component.
Arguments
Returns
on
Error (Optional)
Type: Function
A callback that is called when the image is errored.
Arguments
Default value
on
Load Is Done (Optional)
Type: Function
A callback that is called when the image has finished loading.
Arguments
Default value
remote
Id (Required)
Type: AssetId
The remote id of the image that needs to be loaded.
referrer
Document Id (Required)
Type: RemoteDocumentId
The referring document.
type
(Required)
Type: String
The file type of the image. Which is send to the cms. For example 'web' or 'thumbnail'