Magento 2: Display the custom uploaded image in admin grid

To display the custom uploaded image in admin grid, follow the below steps.

1) Create or override the listing.xml file and add the below code

<column name="custom_image" component="Magento_Ui/js/grid/columns/thumbnail" class="Vendor\Module\Ui\Component\Listing\Column\Thumbnail">
    <settings>
        <filter>text</filter>
        <label translate="true">Custom Image</label>
        <hasPreview>1</hasPreview>
        <sortable>false</sortable>
    </settings>
</column>

<label translate="true">Custom Image</label>

<sortable>false</sortable>

</settings>

</column>

under the Vendor/Module/view/adminhtml/ui_component

2) Create Thumbnail.php and add the below code

<?php
namespace Vendor\Module\Ui\Component\Listing\Column;

use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Ui\Component\Listing\Columns\Column;

class Thumbnail extends Column
{
    const NAME = 'thumbnail';

    const URL_PATH_EDIT = 'moudle/controller/edit';

    /**
     * @var StoreManagerInterface
     */
    protected $storeManager;
    /**
     * @var UrlInterface
     */
    protected $url;
 
    /**
     * Image constructor.
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param StoreManagerInterface $storeManager
     * @param UrlInterface $url
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        StoreManagerInterface $storeManager,
        UrlInterface $url,
        array $components = [],
        array $data = [],
        \Magento\Theme\Block\Html\Header\Logo $logo
    ) {
        parent::__construct($context, $uiComponentFactory, $components, $data);
        $this->storeManager = $storeManager;
        $this->url = $url;
        $this->_logo = $logo;
    }

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        $mediaUrl = $this->storeManager->getStore()->getBaseUrl(UrlInterface::URL_TYPE_MEDIA);
         if (isset($dataSource['data']['items'])) {
            $fieldName = 'custom_image';
            foreach ($dataSource['data']['items'] as & $item) {
                if (!empty($item['custom_image'])) {
                    $name = $item['custom_image'];
                    $item[$fieldName . '_src'] = $mediaUrl.'custom/image'.$name;
                    $item[$fieldName . '_alt'] = '';
                    $item[$fieldName . '_link'] = $this->url->getUrl(static::URL_PATH_EDIT, [
                        'id' => $item['id']
                    ]);
                    $item[$fieldName . '_orig_src'] = $mediaUrl.'custom/image'.$name;
                }
            }
        }
        return $dataSource;
    }
}

<?php

namespace Vendor\Module\Ui\Component\Listing\Column;

use Magento\Framework\UrlInterface;

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

use Magento\Framework\View\Element\UiComponentFactory;

use Magento\Store\Model\StoreManagerInterface;

use Magento\Ui\Component\Listing\Columns\Column;

class Thumbnail extends Column

{

const NAME = 'thumbnail';

const URL_PATH_EDIT = 'moudle/controller/edit';

/**

* @var StoreManagerInterface

protected $storeManager;

/**

* @var UrlInterface

protected $url;

/**

* Image constructor.

* @param ContextInterface $context

* @param UiComponentFactory $uiComponentFactory

* @param StoreManagerInterface $storeManager

* @param UrlInterface $url

* @param array $components

* @param array $data

public function __construct(

ContextInterface $context,

UiComponentFactory $uiComponentFactory,

StoreManagerInterface $storeManager,

UrlInterface $url,

array $components = [],

array $data = [],

\Magento\Theme\Block\Html\Header\Logo $logo

) {

parent::__construct($context, $uiComponentFactory, $components, $data);

$this->storeManager = $storeManager;

$this->url = $url;

$this->_logo = $logo;

}

/**

* Prepare Data Source

* @param array $dataSource

* @return array

public function prepareDataSource(array $dataSource)

{

$mediaUrl = $this->storeManager->getStore()->getBaseUrl(UrlInterface::URL_TYPE_MEDIA);

if (isset($dataSource['data']['items'])) {

$fieldName = 'custom_image';

foreach ($dataSource['data']['items'] as & $item) {

if (!empty($item['custom_image'])) {

$name = $item['custom_image'];

$item[$fieldName . '_src'] = $mediaUrl.'custom/image'.$name;

$item[$fieldName . '_alt'] = '';

$item[$fieldName . '_link'] = $this->url->getUrl(static::URL_PATH_EDIT, [

'id' => $item['id']

]);

$item[$fieldName . '_orig_src'] = $mediaUrl.'custom/image'.$name;

}

return $dataSource;

}

under the Vendor/Module/Ui/Component/Listing/Column

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-641efa551d674412663903/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Hire s. dutt

Let’s have a call

Fill the form & Get Installation Support