Bir görüntüyü magento 2'deki yönetici kılavuzunda görüntüleyin.

Modüllerimden birinin yönetici kılavuzunda bir resim görüntülemek istiyorum.
UI bileşenleri olan yeni ızgara sistemini kullanıyorum.
Küçük resimlerin ürünler için kılavuza nasıl eklendiğine bir göz attım, ancak başımın üzerinden geçti.
Varlığım EAV değil, basit bir düz masa varlık.
Bunu kullanıcı arayüzü bileşen xml dosyama eklemeye çalıştım

<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>

ama ızgaramı etkilememek için dikiş atıyor. görüntü yok (db alanım görüntü denir) sütun, hata yok, hiçbir şey yok.
Biri bana ui bileşenlerini kullanarak kılavuza resim ekleyerek yürüyebilir mi?

UI bileşeniniz xml’in buna eklenmiş olması gerekir:

<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>

.. ve sonra \ Modulename \ Ui \ Component \ Listing \ Column \ Thumbnail.php içinde buna benzer bir şey:

<?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;
    }
}

Umarım bu yardımcı olur!

Grid.php dosyasında aşağıdaki gibi tanımlayın

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

Image.phpAltında oluştur

\ Tedarikcifirmadi \ modulename \ Blok \ Adminhtml \ modulename \ Izgara \ Renderer \

ve kodun altına yapıştırın

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;
    }
}

Bu etiketi ui_componentdüzen dosyasına eklemeniz yeterli

<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>

ve bizim de atamak gelmiş bu yeni bir dosya oluşturmak ui_componentsütununda

<?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;
    }
}

In prepareDataSourcefonksiyonu her sütun nesnesini alacak.

Umarım bu size yardımcı olur.

Sonunda soruma çözümüm var. Parametre olarak oluşturucu blok adına sahip bir ızgara sütunu ekledim.

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

Sonra aşağıdaki gibi bir işleyici bloğu oluşturdum:

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

Umarım bu sana yardımcı olmuştur.