How to show external image in custom admin form for preview Purpose only in magento 2?

Question

I have created a custom module, that will import images from external source and save the image in custom table as imageUrl.

I can show the image thumbnail in the grid(Ui Component). I want to show the image(preview) in edit form( Ui Component). This is not an image uploader.

I tried this way(form.xml file). But no result.

<field name="image">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="source" xsi:type="string">Label </item>
                    <item name="label" xsi:type="string" translate="true">Main Image</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">image</item>
                    <item name="elementTmpl" xsi:type="string">Ayakil\PostFeed\Ui\Component\Listing\PostFeed\Thumbnail</item>
                    <item name="previewTmpl" xsi:type="string">Ayakil_PostFeed/image-preview</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="number">4</item>
                </item>
            </argument>
    </field>

Can someone please help me on this task?

Answer 1

I achieved this task with following steps.

Updated the DataProvider.php file with below content( I did not updated all the DataProvider.php file ).

....
if (!empty($data)) {
        $model = $this->collection->getNewEmptyItem();
        $image = $data["image"];
        $data["image"] = [];
        $data["image"]["name"] = $image;
        $data["image"]["url"] = $image;

        $model->setData($data);
        $this->loadedData[$model->getId()] = $model->getData();
        $this->dataPersistor->clear('ayakil_postfeed_postfeed');
    }
..

Form element using ui component( form.xml file content)

<field name="image" formElement="input" sortOrder="20">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">PostFeed</item>
            </item>
        </argument>
        <settings>
            <dataType>text</dataType>
            <elementTmpl>Ayakil_PostFeed/image-preview</elementTmpl>
            <label translate="true">Media Type</label>
            <dataScope>image</dataScope>
        </settings>
</field>

Next created the template file in following location(app/code/Ayakil/PostFeed/view/adminhtml/web/template/image-preview.html) with the following content.

<div class="file-uploader-summary">
   <div class="file-uploader-preview">
     <a attr="href:  value()" target="_blank">
        <img
            class="preview-image"
            tabindex="0"
            attr="src:  value().url,">
     </a>
   </div>
 </div>

Note , that from the DataProvider i am setting the image url value. So i retrieve the url in template like value().url

Result

I Hope that this will help someone in future.

Answer 2

Create a UI component XML file in your module at Vendor/Module/view/adminhtml/ui_component/ui_form.xml with the following code:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="my_fieldset">
        <field name="myimage_field" formElement="html">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="content" xsi:type="string"><![CDATA[<div><img src="{{media url='my_image.png'}}" /></div>]]></item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Create a template file Vendor/Module/view/adminhtml/templates/mytemplate.phtml

<div>
    <?php echo $block->getImageHtml(); ?>
</div>

Create a block class at Vendor/Module/Block/Html/Image.php

<?php

namespace Vendor\Module\Block\Html;

use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;

class Image extends Template
{
    public function __construct(
        Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    public function getImageHtml()
    {
        $imagePath = 'Vendor_Module::images/my_image.png';
        $imageUrl = $this->getViewFileUrl($imagePath);
        $imageHtml = '<img src="' . $imageUrl . '" />';
        return $imageHtml;
    }
}

You can load the layout in your controller, render the layout by setting your custom template as the myimage_field block's template.

$this->_view->loadLayout();
$this->_view->getLayout()->getBlock('myimage_field')->setTemplate('Vendor_Module::mytemplate.phtml');