Magento 2 - Show image in custom grid

Question

I have a column in my custom grid, I am getting image URL in that column, I want to show image instead of URL. My code of calling that column is:

$this->addColumn(
    'image',
    [
        'header' => __('Header Image'),
        'index' => 'image'
    ]
);

How can I achieve this?

Answer 1

Use frame_callback function to render image in grid. Renderer would be a best practice, but frame_callback is the easy one.

use this code

$this->addColumn(
    'image',
    [
        'header' => __('Header Image'),
        'index' => 'image',
        'frame_callback' => array($this, 'callback_image'),
    ]
);

And at the end of the file add this function

public function callback_image($value)
{
    if (empty($value)){
        return '';
    }
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $mediaUrl = $objectManager->get('Magento\Store\Model\StoreManagerInterface')->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
    $width = 150;
    return "<img src='" . $mediaUrl . $value . "' width='" . $width . "'/>";
}

This should work