This hook is called before previewing an image field in a list.

Purpose

Runs additional business logic before image preview, including:

• Preventing the default preview
• Previewing the image through another mechanism

Parameters

functional registers the hook callback. The host passes the following parameters when executing the hook. Both the image preview parameters and the list common parameters are available on context.

Parameter	Description	Type	Allowed Values	Default
context	Image preview event context	Object	--	--
plugin	Current plugin runtime information; business logic normally does not need it	Object	--	--

Parameter	Description	Type	Allowed Values	Default
objectApiname	Object API name	String	--	--
fieldName	Field API name	String	--	--
data	Current image field value; either a |-delimited string or an array of image objects	String | Object[]	--	--
trData	Complete current row data	Object	--	--
startIndex	Zero-based index of the clicked image in data	Number	--	--
field	Current image field describe	Object	--	--

Return Value

The hook may return a result object or Promise<Object>. After the Promise resolves, the host determines whether to continue with the default preview.

Parameter	Description	Type	Allowed Values	Default
stopPreView	Whether to prevent the default preview (example)	Boolean	--	false

Returning { stopPreView: true } prevents the host's default image preview. If the hook returns nothing, omits stopPreView, or returns false, the default preview continues.

Basic Examples

Basic Usage

export default class Plugin {
    apply() {
        return [{
            event: 'list.previewImage.before',
            functional: this.previewBefore.bind(this)
        }];
    }
    previewBefore(context, plugin) {
        console.log(context.fieldName);
        console.log(context.data);
    }
}

Prevent Preview

export default class Plugin {
    apply() {
        return [{
            event: 'list.previewImage.before',
            functional: this.previewBefore.bind(this)
        }];
    }
    previewBefore(context, plugin) {
        return Promise.resolve({
            stopPreView: true
        });
    }
}