Thanks to Shankar Konar for contributing this topic!

ImagePreview component

The ImagePreview component implements an inline preview of an image, which is typically used in conjunction with a grid of image search results. Users can expand a more detailed preview of an image in-line with other image search results, and they have the ability to click on "next" or "previous" arrows to navigate to another image's detailed preview.

Dependencies

The ImagePreview component has dependencies on the following components:

Column: app/code/Magento/Ui/view/base/web/js/grid/columns/column.js

Options

Option	Description	Type	Default Value
`previewImageSelector`	The selector of the HTML element used for the image preview.	String	`[data-image-preview]`
`visibleRecord`	Currently visible image.	Int	null
`height`	Height of Image Preview.	Int	`0`
`displayedRecord`	Currently previewed image.	Object	`{}`
`lastOpenedImage`	Previously opened image.	Int	null
`statefull`	Defines a list of component properties whose values are automatically saved in the configured storage if they change. `key` is the property's name and the `value` defines whether its saved.	Object	`{sorting: true, lastOpenedImage: true}`
`template`	Path to the component’s `.html` template.	String	`ui/grid/columns/image-preview`

Examples

<column name="image-preview" component="Magento_Ui/js/grid/columns/image-preview">
    <settings>
        <label translate="true">Image Preview</label>
        <visible>true</visible>
        <sortable>false</sortable>
    </settings>
</column>
Copied to your clipboard
<column name="image-preview" component="Magento_Ui/js/grid/columns/image-preview">
    <settings>
        <label translate="true">Image Preview</label>
        <visible>true</visible>
        <sortable>false</sortable>
    </settings>
</column>