Display image in a Magento 2 UI component admin grid

If you have an image in your admin form and would like to display the saved image in the listing grid, follow the steps below:

A typical UI component admin grid, will look as shown below:

<?xml version="1.0" ?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        ...
    </argument>
    <settings>
        ...
    </settings>
    <dataSource component="Magento_Ui/js/grid/provider" name="*_listing_data_source">
        ...
    </dataSource>
    <listingToolbar name="listing_top">
        ...
    </listingToolbar>
    <columns name="*_banner_columns">
        ...
        <column name="id">
            <settings>
                <filter>textRange</filter>
                <label translate="true">ID</label>
                <sorting>asc</sorting>
            </settings>
        </column>
        <column name="name">
            <settings>
                <filter>text</filter>
                <label translate="true">Name</label>
                <editor>
                    <editorType>text</editorType>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">true</rule>
                    </validation>
                </editor>
            </settings>
        </column>
        ...
    </columns>
</listing>

To this, you need to add a column that will display an image. A new column can be added inside the <columns>...</columns> tag, as shown above. To add an image column, add the following XML inside the <columns>...</columns> before/after any other column.

Let us assume the name of the image is product_image

<column name="product_image" class="{Namespace}\{Module}\Ui\Component\Listing\Column\Thumbnail" component="Magento_Ui/js/grid/columns/thumbnail">
    <settings>
        <label translate="true">Image</label>
    </settings>
</column>

The above XML adds a new column with name product_image. The class argument of the <column /> tag, defines the class which will prepare and return data required for displaying the image.

Unlike the columns defined in the above listing XML, this column has a component attribute. This attribute defines which knockoutjs component will render the results of this column. In our case Magento_Ui/js/grid/columns/thumbnail, which is a component in the UI module in Magento 2 which renders the thumbnail column. You can check the other available renderer components here: Magento_Ui/js/grid/columns.

Next create the file {Namespace}\{Module}\Ui\Component\Listing\Column\Thumbnail.php and add the following code:

<?php

namespace {Namespace}\{Module}\Ui\Component\Listing\Column;

use Magento\Catalog\Helper\Image;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Ui\Component\Listing\Columns\Column;

class Thumbnail extends Column
{
    const ALT_FIELD = 'title';

    /**
     * @var \Magento\Store\Model\StoreManagerInterface
     */
    protected $storeManager;

    /**
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param Image $imageHelper
     * @param UrlInterface $urlBuilder
     * @param StoreManagerInterface $storeManager
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        Image $imageHelper,
        UrlInterface $urlBuilder,
        StoreManagerInterface $storeManager,
        array $components = [],
        array $data = []
    ) {
        $this->storeManager = $storeManager;
        $this->imageHelper = $imageHelper;
        $this->urlBuilder = $urlBuilder;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     *
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach($dataSource['data']['items'] as &$item) {
                $url = '';
                if($item[$fieldName] != '') {
                    $url = $this->storeManager->getStore()->getBaseUrl(
                        UrlInterface::URL_TYPE_MEDIA
                    ) . 'path/to/your/image/' . $item[$fieldName];
                }
                $item[$fieldName . '_src'] = $url;
                $item[$fieldName . '_orig_src'] = $url;
            }
        }

        return $dataSource;
    }
}

The prepareDataSource method return the data in the format needed for the Magento_Ui/js/grid/columns/thumbnail component to render the thumbnail in the grid column. It gets the column name and checks in the grid data, for every time, the data that is set for the product_image field. It then modifies the data from a string to an array that contains the keys {$fieldName}_src and {$fieldName}_orig_src to set the complete URL of the image instead of just it’s name or relative path from the media directory that is saved in the database.

The data passed to the Magento_Ui/js/grid/columns/thumbnail component will then processes it and when the data is in the correct format, shows the respective image thumbnail if it exists.

To add a select/dropdown column to your Magento 2 admin grid check: Add select/dropdown in a Magento 2 UI component admin grid.