How to show image in custom grid in magento 2 backend?

Question

I am trying to display image on custom grid in back-end. I have tried some example but anything is not working yet.

Grid.php (Contact/Modules/Block/Adminhtml/Contact is the location)

$this->addColumn(
        'photo',
        [
            'header' => __('photo'),
            'index' => 'photo',
            'class' =>'photo',
            'renderer'  => '\Contact\Modules\Block\Adminhtml\Inquiry\Grid\Renderer\Photo',
        ]
    ); 

Photo.php

<?php
namespace Contact\Modules\Block\Adminhtml\Inquiry\Grid\Renderer;

use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer;
use Magento\Framework\Object;
use Magento\Store\Model\StoreManagerInterface;

class Photo extends AbstractRenderer
{
   private $_storeManager;
   /**
    * @param \Magento\Backend\Block\Context $context
    * @param array $data
    */
   public function __construct(\Magento\Backend\Block\Context $context, 
StoreManagerInterface $storemanager, array $data = [])
   {
       $this->_storeManager = $storemanager;
       parent::__construct($context, $data);
       $this->_authorization = $context->getAuthorization();
   }
   /**
    * Renders grid column
    *
    * @param Object $row
    * @return  string
    */
   public function render(Object $row)
   {
       $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
           \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
       );
       $imageUrl = $mediaDirectory.'/Contact/Modules'.$this->_getValue($row);
       return '<img src="'.$imageUrl.'" width="50"/>';
   }
}

reference link for this example https://firebearstudio.com/blog/magento-2-image-rendering.html Now it is showing

 Invalid block type: \Contact\Modules\Block\Adminhtml\Inquiry\Grid\Renderer\Photo
Exception #1 (ReflectionException): Class Contact\Modules\Block\Adminhtml\Inquiry\Grid\Renderer\Photo does not exist

Is there anything i need to add to display image in grid view ?

Answer 1

you were missing return '<img src="'.$imageUrl.'" />';

change Modules to Module in every occurrence. because your module name is Module.

Answer 2

Check render function it't look like

    public function __construct(
        \Magento\Framework\UrlInterface $urlBuilder,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        $data = []
    ) {
        $this->_storeManager = $storeManager;
    }

    public function render(\Magento\Framework\DataObject $row)
    {
        $imageName = $row->getRbBannerImage();
        if($imageName=="")
        {
            return "";
        }
        else
        {
            $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            );

            return "<img src='".$mediaDirectory.'banner/images'.$imageName."' width='75' height='75'/>";
        }
    }

Answer 3

You can show an image in your custom grid using a custom class that extends the UI component column class. Following is a sample code for your reference:

Namespace\ModuleName\Ui\Component\Listing\Columns\Image

<?php

namespace Webficial\Grid\Ui\Component\Listing\Columns;

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 Image extends Column
{
    protected $storeManager;
 
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        StoreManagerInterface $storeManager,
        \Magento\Catalog\Helper\Image $imageHelper,
        array $components = [],
        array $data = []
    ) {
        $this->storeManager = $storeManager;
        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'] = $this->getAlt($item) ?: '';
                $item[$fieldName . '_orig_src'] = $url; 
            }
        }
        return $dataSource;
    }
}

Namespace\ModeulName\view\adminhtml\ui_component\banner_grid.xml

<column name="img" class="Webficial\Grid\Ui\Component\Listing\Columns\Image">
    <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="label" xsi:type="string" translate="true">Image</item>
            <item name="altField" xsi:type="string">title</item>
            <item name="has_preview" xsi:type="string">1</item>
            <item name="sortOrder" xsi:type="number">30</item>
        </item>
    </argument>
</column>

Please let me know if any help is needed.