Hello Magento Friends,

In this blog, we will learn How to Display Thumbnail Image on UI Component Grid in Magento 2.

Customization is the key feature of Magento. One of the customization features is adding an additional column to the UI component grid. Adding a thumbnail image column to the UI component grid in Magento 2 admin is useful for displaying product images, customer avatars, and other images related to your data. This will enhance the visual representation of your Magento 2 admin grid.

Let’s find out the steps to display thumbnail images on the UI component grid in Magento 2.

Steps to Display Thumbnail Image on UI Component Grid in Magento 2:

Step 1: First, create a ui_component file

You can take the below reference to create a custom form in the admin grid using the UI component


Step 2: Now move to the below path


Then add the code below

You need to add an image column in the above file and also set the Thumbnail file path. 

Step 3: Create the below file


Add the code as given below


Now, navigate to your custom grid in the admin panel, and you should see a new column displaying thumbnail images.

thumbnail image in Magento 2 admin ui grid


Hope the process of adding thumbnail images to your Magento 2 UI component grid helped you customize your store. If you faced any hardship while implementing the above steps, share with me through the comment box. Share the tutorial with your friends and stay in touch with us for more Magento 2 solutions.

Happy Coding!

Click to rate this post!
[Total: 0 Average: 0]