---
title: "Magento 2 Display Image in Admin UI Grid"
url: "https://dolphinwebsolution.com/magento-2-display-image-in-admin-ui-component-grid"
date: "2021-07-17T10:46:36+05:30"
modified: "2023-08-24T09:30:22+05:30"
author:
  name: "Mahesh Makwana"
categories:
  - "Magento"
word_count: 467
reading_time: "3 min read"
summary: "Magento 2 provides upload, store, and retrieve images. Here we learn how to display image in admin UI grid in Magento 2. After add and store images in the file system and values are stores at DB, N..."
description: "Magento 2 provides upload, store, and retrieve images. Here we learn how to display image in admin UI grid in Magento 2. After add and store images in the fi..."
keywords: "display image in admin,magento 2 display image in admin,display image in admin magento, Magento"
language: "en"
schema_type: "Article"
related_posts:
  - title: "Pros and Cons of the Hyvä Theme for Magento 2"
    url: "https://dolphinwebsolution.com/blog/pros-and-cons-of-the-hyva-theme-for-magento-2/"
  - title: "How to Pass the System Configuration Value to Knockout"
    url: "https://dolphinwebsolution.com/how-to-pass-the-system-configuration-value-to-knockout"
  - title: "How to Create Custom Event in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-create-custom-event-in-magento-2"
---

# Magento 2 Display Image in Admin UI Grid

_Published: July 17, 2021_  
_Author: Mahesh Makwana_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/02/Admin-UI-grid-1024x512.png)

Magento 2 provides upload, store, and retrieve images. Here we learn how to display image in admin UI grid in Magento 2. After add and store images in the file system and values are stores at DB, Now we need to display the image in the admin Ui grid.

If you don’t know about Ui Admin Grid then [click here.](https://dolphinwebsolution.com/how-to-create-ui-form-and-ui-grid-in-magento-2)

**Follow the below steps to display the image in the admin UI grid:**

- **Step 1:** Add below code to your Admin Ui-component file at **app/code/VendoreName/ModuleName/view/adminhtml/ui\_component**

```
.....
    <column name="img" class="VendoreName\ModuleName\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="sortable" xsi:type="boolean">false</item>
           <item name="altField" xsi:type="string">store image</item>
           <item name="has_preview" xsi:type="string">1</item>
               <item name="filter" xsi:type="string">text</item>
               <item name="label" xsi:type="string" translate="true">Image</item>
               <item name="sortOrder" xsi:type="number">80</item>
           </item>
       </argument>
   </column>
.....
```

Here **img** is column name where image name is saved, And image comes from **Thumbnail class**.

- **Step 2:** Create **Thumbnail.php** file at **app/code/VendoreName/ModuleName/Ui/Component/Listing/Column**

```
<?php

namespace VendoreName\ModuleName\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,
        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($item[$fieldName] != '') {
                    /* Set your image physical path here */
                    $url = $this->storeManager->getStore()->getBaseUrl(
                        \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
                    ).$item[$fieldName];
                }
                $item[$fieldName . '_src'] = $url;
                $item[$fieldName . '_alt'] = $item[$fieldName];
                $item[$fieldName . '_link'] = $this->urlBuilder->getUrl('adminRouteName/adminControllerName/actionName',['id' => $item['id']]); // add edit url
                $item[$fieldName . '_orig_src'] = $url;
            }
        }
        return $dataSource;
    }
}
```

After adding the above files run **PHP bin/magento cache:clean** Magento command and refresh your grid. Now you can see images in the admin UI grid.

I hope this helps you. For any doubts regarding this topic, please write your doubts in the comments section.


---

_View the original post at: [https://dolphinwebsolution.com/magento-2-display-image-in-admin-ui-component-grid](https://dolphinwebsolution.com/magento-2-display-image-in-admin-ui-component-grid)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 07:38:04 UTC_