In my last blog, we have learned “Magento 2 How to create Image Upload field in the custom module using UI Component”.
Now we will continue to “How to show a thumbnail image in the admin grid using UI Component.”

This component file contains all grid elements that will be handled by XML file with many default build-in components of Magento like search, filter, export, button, mass action.

We will modify a “brand_image” column which shows the image thumbnail.

Let’s take the example of brand module as we have used previously.

Step 1: Update Grid UI Component file.

Open yournamespace_brand_branddetails_listing.xml in following path: app/code/Yournamespace/Brand/view/adminhtml/ui_component

This component file contains all grid elements that will be handled by XML file with many default build-in components of Magento like search, filter, export, button, mass action.

We will modify a “brand_image” column which shows the image thumbnail.

  <column name="brand_image" class="Yournamespace\Brand\Ui\Component\Listing\Column\Thumbnail">
	<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="resizeEnabled" xsi:type="boolean">true</item>
			<item name="resizeDefaultWidth" xsi:type="string">200</item>
			<item name="altField" xsi:type="string">title</item>
			<item name="has_preview" xsi:type="string">1</item>
			<item name="sortable" xsi:type="boolean">false</item>
			<item name="label" xsi:type="string" translate="true">Brand Image</item>
			<item name="sortOrder" xsi:type="number">10</item>
		</item>
	</argument>
</column>

Step 2: Now we create thumbnail Class

Create Thumbnail.php in following path Yournamespace\Brand\Ui\Component\Listing\Column

<?php
namespace Yournamespace\Brand\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
{   
	protected $storeManager;

	public function __construct(
		ContextInterface $context,
		UiComponentFactory $uiComponentFactory,
		StoreManagerInterface $storemanager,
		\Magento\Framework\UrlInterface $urlBuilder,
		array $components = [],
		array $data = []
	) {
		parent::__construct($context, $uiComponentFactory, $components, $data);
		$this->_storeManager = $storemanager;
		$this->urlBuilder = $urlBuilder;
	}

	public function prepareDataSource(array $dataSource)
	{
		$mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
		if (isset($dataSource['data']['items'])) {  
			$fieldName = 'brand_image';
			foreach ($dataSource['data']['items'] as & $item) {
				$imageUrl = $item['brand_image_url'];
				$item['brand_image'] = $imageUrl;								
				$item[$fieldName . '_src'] = $imageUrl;
				$item[$fieldName . '_alt'] = $item['title'];
				$item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
					'brand/branddetails/editbrand',
					['entity_id' => $item['entity_id'], 'store' => $this->context->getRequestParam('store')]
				);                
				$item[$fieldName . '_orig_src'] = $imageUrl;
			}
		}
		return $dataSource;
	}
}

Above all are very easy steps to show a thumbnail image on the grid.

Just read all things carefully and implement it on your custom module to achieve this functionality.

Thank you for reading this post.