This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

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.


The ImagePreview component has dependencies on the following components:

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

Configuration 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


<column name="image-preview" component="Magento_Ui/js/grid/columns/image-preview">
        <label translate="true">Image Preview</label>

Source files

Extends Column:


ImagePreview Component