magento 2의 관리 그리드에 이미지 표시

내 모듈 중 하나의 관리 표에 이미지를 표시하고 싶습니다.
UI 구성 요소가있는 새로운 그리드 시스템을 사용하고 있습니다.
썸네일이 제품의 그리드에 추가되는 방법을 살펴 보았지만 머리 위에 있습니다.
내 엔티티는 EAV가 아니며 단순한 플랫 테이블 엔티티입니다.
내 UI 구성 요소 XML 파일에 이것을 추가하려고했습니다.

<column name="image">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/image</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>
    </argument>
</column>

그러나 그리드에 영향을 미치지 않는 이음새가 있습니다. 이미지가 없습니다 (내 DB 필드를 이미지라고 함) 열, 오류 없음, 아무것도 없습니다.
누군가 UI 구성 요소를 사용하여 그리드에 이미지를 추가하는 과정을 안내해 줄 수 있습니까?

UI 구성 요소 XML에 다음이 추가되어 있어야합니다.

<column name="image" class="Your\Modulename\Ui\Component\Listing\Column\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">title</item>
            <item name="has_preview" xsi:type="string">1</item>
            <item name="label" xsi:type="string" translate="true">Thumbnail</item>
        </item>
    </argument>
</column>

.. 그리고 Your \ Modulename \ Ui \ Component \ Listing \ Column \ Thumbnail.php에서 다음과 비슷한 것이 있습니다 :

<?php
namespace Your\Modulename\Ui\Component\Listing\Column;

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;

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

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

    /**
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param Image $imageHelper
     * @param UrlInterface $urlBuilder
     * @param StoreManagerInterface $storeManager
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        Image $imageHelper,
        UrlInterface $urlBuilder,
        StoreManagerInterface $storeManager,
        array $components = [],
        array $data = []
    ) {
        $this->storeManager = $storeManager;
        $this->imageHelper = $imageHelper;
        $this->urlBuilder = $urlBuilder;
        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 = '';
                if($item[$fieldName] != '') {
                    $url = $this->storeManager->getStore()->getBaseUrl(
                        \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
                    ).'pathtoyourimage/'.$item[$fieldName];
                }
                $item[$fieldName . '_src'] = $url;
                $item[$fieldName . '_alt'] = $this->getAlt($item) ?: '';
                $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
                    'your_module/yourentity/edit',
                    ['yourentity_id' => $item['yourentity_id']]
                );
                $item[$fieldName . '_orig_src'] = $url;
            }
        }

        return $dataSource;
    }

    /**
     * @param array $row
     *
     * @return null|string
     */
    protected function getAlt($row)
    {
        $altField = $this->getData('config/altField') ?: self::ALT_FIELD;
        return isset($row[$altField]) ? $row[$altField] : null;
    }
}

도움이 되길 바랍니다.

grid.php에서 아래와 같이 정의하십시오.

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

Image.php아래에서 생성

\ 공급 업체 이름 \ 모듈 이름 \ 블록 \ 관리자 \ 모듈 이름 \ 그리드 \ 렌더러 \

코드 아래에 붙여 넣습니다.

namespace Vendorname\Modulename\Block\Adminhtml\Modulename\Grid\Renderer;

class Image extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
{
    protected $_storeManager;


    public function __construct(
        \Magento\Backend\Block\Context $context,
        \Magento\Store\Model\StoreManagerInterface $storeManager,      
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->_storeManager = $storeManager;        
    }


    public function render(\Magento\Framework\DataObject $row)
    {
        $img;
        $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
           \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
       );
        if($this->_getValue($row)!=''):
            $imageUrl = $mediaDirectory.$this->_getValue($row);
            $img='<img src="'.$imageUrl.'" width="100" height="100"/>';
        else:
            $img='<img src="'.$mediaDirectory.'Modulename/no-img.jpg'.'" width="100" height="100"/>';
        endif;
        return $img;
    }
}

이 태그를 ui_component레이아웃 파일 에 추가 하십시오.

<column name="logo" class="NAMESPACE\MODULENAME\Ui\Component\Listing\Columns\Logo">
    <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="add_field" xsi:type="boolean">true</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">Brand Logo</item>
        </item>
    </argument>
</column>

ui_component열에 할당 한이 새 파일을 만듭니다

<?php
namespace NAMESPACE\MODULENAME\Ui\Component\Listing\Columns;

use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;

class Logo extends \Magento\Ui\Component\Listing\Columns\Column
{
    const NAME = 'logo';

    const ALT_FIELD = 'name';

    protected $_storeManager;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,        
        \Magento\Framework\UrlInterface $urlBuilder,
        array $components = [],
        array $data = [],
        \Magento\Store\Model\StoreManagerInterface $storeManager
    ) {        
        parent::__construct($context, $uiComponentFactory, $components, $data);
        $this->_storeManager = $storeManager;
        $this->urlBuilder = $urlBuilder;
    }

    /**
    * 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) {
                $mediaRelativePath=$this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
                $logoPath=$mediaRelativePath.$item['logo'];
                $item[$fieldName . '_src'] = $logoPath;
                $item[$fieldName . '_alt'] = $this->getAlt($item);
                $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
                    'brand/manage/edit',
                    ['brand_id' => $item['brand_id'], 'store' => $this->context->getRequestParam('store')]
                );
                $item[$fieldName . '_orig_src'] = $logoPath;

            }
        }

        return $dataSource;
    }

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

에서 prepareDataSource기능을 각 열 개체를 얻을 것이다.

이것이 도움이되기를 바랍니다.

마지막으로 질문에 대한 해결책이 있습니다. 렌더러 블록 이름이 매개 변수로 그리드 열을 추가했습니다.

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

그런 다음 아래와 같이 렌더러 블록을 추가했습니다.

namespace YourVendor\YourModule\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"/>';
    }
}

이것이 도움이되기를 바랍니다.