How to render an image in Magento 2 Adminhtml grids

October 19, 2015 - Magento 2

To render image in Magento 2 Adminhtml grids, first of all you have to add a grid column with a renderer block name as a parameter:

$this->addColumn(
   'image',
   array(
       'header' => __('Image'),
       'index' => 'image',
       'renderer'  => '\Ktpl\Inquiry\Block\Adminhtml\Inquiry\Grid\Renderer\Image',
   )
);

$this->addColumn(

'image',

array(

'header' => __('Image'),

'index' => 'image',

'renderer' => '\Ktpl\Inquiry\Block\Adminhtml\Inquiry\Grid\Renderer\Image',

)

);

Then it is necessary to create a renderer block as follows:

namespace Ktpl\Inquiry\Block\Adminhtml\Inquiry\Grid\Renderer;

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

class Image 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.'/inquiry/images'.$this->_getValue($row);
       return '<img src="'.$imageUrl.'" width="50"/>';
   }
}