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 ?

• Qaisar Satti: you were missing return '<img src="'.$imageUrl.'" />';
• Ramkishan Suthar: It is saying undefined block type
• Ramkishan Suthar: control is not going in Photo.php
• Ramkishan Suthar: plz check ii have updated my question
• Qaisar Satti: add block code completely..

Answer 1

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

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

• Ramkishan Suthar: module name is Modules not Module
• Qaisar Satti: check you grid.php location you added by urself
• Ramkishan Suthar: sorry it was typo module name is Modules
• Ramkishan Suthar: please suggest any answer
• Qaisar Satti: @Ramkishan did you checked the spelling mistake? and remove var/generation folder?

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'/>";
 }
 }

• Ramkishan Suthar: Please check updated question

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.