display uploaded image in custom page in admin grid

Question

I want to display an uploaded image in a custom page in admin grid at is shown in 1 picture and want to display in 2 picture

<field name="customization_attachment">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">file</item>
                <item name="label" translate="true" xsi:type="string">Attachment</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="source" xsi:type="string">Product</item>
                <item name="disabled" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">70</item>
                <item name="dataScope" xsi:type="string">customization_attachment</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">false</item>
                </item>
            </item>
        </argument>
    </field>

through this code image name is coming as shown in photo i want to display image

Answer 1

Magento 2 UI component for the preview image image-preview.html is responsible for that for more detail check this

1. In your Form.xml add below code of line.

<item name="previewTmpl" xsi:type="string">Namespace_Modulename/image-preview</item>

2. Create file name image-preview.html in directory.

Namespace/Productlabel/view/adminhtml/web/template/

<div class="file-uploader-summary">
<div class="file-uploader-preview">
    <a attr="href: $parent.getFilePreview($file)" target="_blank">
        <img
            class="preview-image"
            tabindex="0"
            event="load: $parent.onPreviewLoad.bind($parent)"
            attr="
                src: $parent.getFilePreview($file),
                alt: $file.name">
    </a>

    <div class="actions">
        <button
            type="button"
            class="action-remove"
            data-role="delete-button"
            attr="title: $t('Delete image')"
            click="$parent.removeFile.bind($parent, $file)">
            <span translate="'Delete image'"/>
        </button>
    </div>
</div>

<div class="file-uploader-filename" text="$file.name"/>
<div class="file-uploader-meta">
    <text args="$file.previewWidth"/>x<text args="$file.previewHeight"/>
</div>

I hope it helps!