How to add image-column in admin grid

Question

I have create a form which can upload a image and it saved in to db. in admin side i have a grid to display the table. and it have view action it show all details from db. it only show the image url how to display the image.

Answer 1

Please add below code in you Form.php which located Dyode\Pricebeat\Block\Adminhtml\Form\Edit\Tab here.

$fieldset->addType('productimage', '\Dyode\Pricebeat\Block\Adminhtml\Form\Edit\Tab\ImageRenderer');
    $fieldset->addField('product_image_url', 'productimage', array(           
       'label'     => __('Image')
    ));

And add ImageRenderer.php put there.

<?php

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

namespace Dyode\Pricebeat\Block\Adminhtml\Form\Edit\Tab;

/**
 * Description of ImageRenderer
 *
 * @author dharmendra
 */
class ImageRenderer extends \Magento\Framework\Data\Form\Element\AbstractElement
{
    /**
     * get category name
     * @param  DataObject $row
     * @return string
     */
    public function getElementHtml()
    {
        // here you can write your code.
        $html = '';

        if ($this->getValue()) 
        {
            $html = $this->getMediaImageHtml($this->getValue());


        } 

        return $html;
    }

    public function getMediaImageHtml($imageName)
    {
        $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
        $mediaUrl = $objectManager->get('Magento\Store\Model\StoreManagerInterface')
                            ->getStore()
                            ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
        $html = "<img src='".$mediaUrl.'catalog/product/'.$imageName."' height='100px' width='100px'>";        
        return $html;
    }
}

Still you have any query let me know.

Answer 2

Based on example from my module:

Define a column in the listing with a custom class (MageWorx\ShippingRules\Ui\Component\Listing\Columns\Thumbnail in example). It should be Magento_Ui/js/grid/columns/thumbnail component:

<column name="image" class="MageWorx\ShippingRules\Ui\Component\Listing\Columns\Thumbnail">
    <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="sortable" xsi:type="boolean">false</item>
            <item name="altField" xsi:type="string">name</item>
            <item name="has_preview" xsi:type="string">1</item>
            <item name="label" xsi:type="string" translate="true">Image</item>
            <item name="sortOrder" xsi:type="number">62</item>
        </item>
    </argument>
</column>

Create corresponding class for a column:

<?php
/**
 * Copyright © 2017 MageWorx. All rights reserved.
 * See LICENSE.txt for license details.
 */

namespace MageWorx\ShippingRules\Ui\Component\Listing\Columns;

use Magento\Catalog\Helper\Image;
use Magento\Framework\UrlInterface;
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;
use MageWorx\ShippingRules\Helper\Data as Helper;

class Thumbnail extends Column
{
    const ALT_FIELD = 'name';

    /**
     * @var \Magento\Store\Model\StoreManagerInterface
     */
    protected $storeManager;

    /**
     * @var Image
     */
    protected $imageHelper;

    /**
     * @var UrlInterface
     */
    protected $urlBuilder;

    /**
     * @var Helper
     */
    protected $helper;

    /**
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param Image $imageHelper
     * @param UrlInterface $urlBuilder
     * @param StoreManagerInterface $storeManager
     * @param Helper $helper
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        Image $imageHelper,
        UrlInterface $urlBuilder,
        StoreManagerInterface $storeManager,
        Helper $helper,
        array $components = [],
        array $data = []
    ) {
        $this->storeManager = $storeManager;
        $this->imageHelper = $imageHelper;
        $this->urlBuilder = $urlBuilder;
        $this->helper = $helper;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as &$item) {
                $url = '';
                $thumbnailUrl = '';
                $link = $this->urlBuilder->getUrl(ExtendedZoneActions::URL_PATH_EDIT, ['id' => $item['entity_id']]);
                if ($item[$fieldName] != '') {
                    $url = $this->helper->getImageUrl($item[$fieldName]);
                    $thumbnailUrl = $this->helper->getImageUrl($item[$fieldName], Helper::IMAGE_TYPE_THUMBNAIL);
                }
                $item[$fieldName . '_src'] = $thumbnailUrl;
                $item[$fieldName . '_alt'] = $this->getAlt($item) ?: '';
                $item[$fieldName . '_link'] = $link;
                $item[$fieldName . '_orig_src'] = $url;
            }
        }

        return $dataSource;
    }

    /**
     * @param array $row
     *
     * @return null|string
     */
    protected function getAlt($row)
    {
        return isset($row[static::ALT_FIELD]) ? $row[static::ALT_FIELD] : null;
    }
}

That's all. Do not forget to change all names to the corresponding values from your module. In the example the image field was used (path to an image has stored inside corresponding column in the database)