1

enter image description here enter image description here

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

0

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>

  1. 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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.