Magento 2 Add Image on Admin UI Grid

While developing any custom extension most of time wants to display image in admin grid. So, in this aricle we'll show you how to display Image on the admin ui grid.

Before we start I assume, you have already created a custom grid.

Now, you just need to add image_field as a column in your grid listing file. Here image_field is a image field name in our custom table. So, you just need to replace it with your field_name.

saveCopyzoom_out_map
<column name="image_field" class="Devhooks\Helloworld\Ui\Component\Listing\Helloworld\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="filter" xsi:type="string">textarea</item>
            <item name="label" translate="true" xsi:type="string">Image Field</item>
            <item name="has_preview" xsi:type="string">1</item>
            <item name="altField" xsi:type="string">name</item>
        </item>
    </argument>
</column>

In the above code you can see we've added Devhooks\Helloworld\Ui\Component\Listing\Helloworld\Thumbnail class to render image on grid. So, now we need to create that file and add the below code.

saveCopyzoom_out_map
<?php
namespace Devhooks\Helloworld\Ui\Component\Listing\Helloworld;

use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;

class Thumbnail extends \Magento\Ui\Component\Listing\Columns\Column {

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

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource) {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as &$item) {
                if ($item['image_field']) {
                    $imageUrl = $this->urlBuilder->getBaseUrl().'pub/media/wysiwyg/helloworld/'. $item['image_field'];
                    $item[$fieldName . '_src'] = $imageUrl;
                    $item[$fieldName . '_alt'] = $item['image_field'];
                    $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
                        'helloworld/index/form',
                        ['id' => $item['id']]);
                    $item[$fieldName . '_orig_src'] = $imageUrl;
                }
            }
        }
        return $dataSource;
    }
}

In the above code you can see prepareDataSource funcction. In that function you just need to replace your field name with image_field and change your image path with pub/media/wysiwyg/helloworld/.

Open Command line in folder root of magento and run the below command.

saveCopyzoom_out_map
php bin/magento cache:clean

That's it.

We hope this Magento article helped you to know How to Add Image on Admin UI Grid in Magento 2.

Bookmark it for your future reference. Do comment below if you have any other questions or doubts.

P.S. Do share this article with your team.