Display Multiple Images In UI Grid Column Magento2

Display Multiple Images In UI Grid Column Magento2 – sometime we need that we have to display more than one image in a UI grid column. so its a pretty easy just you have to follow some simple steps to achieve this.

1 => Just open your ui_component xml file and write the necessary code inside your item tag in a column where you want to display multiple images.

<item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>

lets make it little bit easy with an example.
here i have created a column, where i want to display more than one image.

<column name="image" class="Webkul\MultiImageExample\Ui\Component\Listing\Columns\MultipleImages">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
            <item name="altField" xsi:type="string">name</item>
            <item name="has_preview" xsi:type="string">0</item>
            <item name="sortable" xsi:type="boolean">false</item>
            <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
            <item name="label" xsi:type="string" translate="true">Images</item>
            <item name="sortOrder" xsi:type="number">1</item>
        </item>
    </argument>
</column>

you have to also define a renderer and here renderer is

<column name="image" class="Webkul\MultiImageExample\Ui\Component\Listing\Columns\MultipleImages">

2 => Now you have to write the code in renderer.
here my code is

Searching for an experienced
Magento 2 Company ? Find out More

<?php

namespace Webkul\MultiImageExample\Ui\Component\Listing\Columns;

use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Store\Model\StoreManagerInterface;

class MultipleImages extends \Magento\Ui\Component\Listing\Columns\Column
{
    /**
     * object of store manger class
     * @var storemanager
     */
    protected $_storeManager;

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

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
        if (isset($dataSource['data']['items'])) {  
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as & $item) {
                $badgeArray=array();
                    $imagesContainer='';
                        //imagesArray contain images
                        $imagesArray = array(
                            [
                                'image_url'=>'url1'
                            ],
                            [
                                'image_url'=>'url2'
                            ]
                            );
                        foreach ($imagesArray as $image) {
                            $imageUrl = $mediaDirectory.$image['image_url'];
                            $imagesContainer = $imagesContainer."<img src=". $imageUrl ." width='50px' height='50px' style='display:inline-block;margin:2px'/>";
                        }
                    $item[$fieldName]=$imagesContainer;

            }
        }
        return $dataSource;
    }
}

Now the images will be display at your grid column.
hope so it will help you.