Display image in a Magento 2 UI component admin grid

If you have an image field in your admin form and want to display the saved image in your admin grid listing, follow the steps below.

Step 1: Basic Admin Grid XML

A typical UI component-based admin grid looks like this:

<?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>
        <!-- Add your image column here -->
    </columns>
</listing>

Step 2: Add Image Column

To display an image in the grid, add a new column within the <columns>...</columns> section. Assume the image field is named 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>

• class: Specifies the PHP class that prepares image data.
• component: Defines the JS component that renders the image (thumbnail).

Magento's default renderer is Magento_Ui/js/grid/columns/thumbnail. You can explore other options in Magento_Ui/js/grid/columns.

Step 3: Create the Renderer Class

Now, create the PHP class that formats the image data:

<?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';

    protected $storeManager;
    protected $imageHelper;
    protected $urlBuilder;

    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);
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');

            foreach ($dataSource['data']['items'] as &$item) {
                $url = '';
                if (!empty($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;
    }
}

Explanation

• prepareDataSource() modifies the data format expected by the thumbnail renderer.
• It builds the full image URL using getBaseUrl() and adds two keys:
  • {field}_src – image URL to display.
  • {field}_orig_src – full-size image (used in popup/lightbox).

Result

With these steps, the admin grid will render a thumbnail of the image if it exists in the media path. This is particularly useful for listing banners, product images, or any entity with an image field.

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