extjs - 无法在 AEM 中的对话框上显示图像

Question

我正在尝试创建一个带有图像预览的对话框。我能够与所有字段创建对话框，但我面临图像问题。我已经看到了可以拖放图像的图像组件，但我需要在打开对话框组件时显示图像。有没有不需要拖放的组件。

我尝试过使用 html5smartimage 图像但不起作用。请参阅下面的代码:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
height="{Long}500"
title="Test Dialog"
width="{Long}800"
xtype="dialog">
<items
    jcr:primaryType="cq:Widget"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <tab1
            jcr:primaryType="cq:Panel"
            title="Component Details">
            <items jcr:primaryType="cq:WidgetCollection">
                <image
                    jcr:primaryType="cq:Widget"
                    cropParameter="./imageCrop"
                    ddGroups="[media]"
                    fileNameParameter="./fileName"
                    fileReferenceParameter="./fileReference"
                    mapParameter="./imageMap"
                    name="./file"
                    requestSuffix=".img.png"
                    rotateParameter="./imageRotate"
                    title="Image"
                    xtype="html5smartimage">
                    <icon.png jcr:primaryType="nt:file">
                        <jcr:content
                            jcr:data="{Binary}"
                            jcr:lastModified="{Date}2015-07-28T19:27:46.878+05:30"
                            jcr:lastModifiedBy="admin"
                            jcr:mimeType="image/png"
                            jcr:primaryType="nt:resource"
                            jcr:uuid="754c14c8-4423-45df-b982-06bfc13dc6e3"/>
                    </icon.png>
                </image>
            </items>
        </tab1>
    </items>
    </items>
</jcr:root>

请帮我解决这个问题。

Answer 1

如果您只想在对话框中显示静态图像(也不需要提交)，我认为没有必要使用 html5smartimage。

您可以使用 xtype displayfield并使用 html 属性，如下所示。

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0" 
    xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Dialog"
    height="{Long}500"
    title="Test Dialog"
    width="{Long}800"
    xtype="dialog">
    <items
        jcr:primaryType="cq:Widget"
        xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <tab1
                jcr:primaryType="cq:Panel"
                title="Component Details">
                <items jcr:primaryType="cq:WidgetCollection">
                    <displayimage jcr:primaryType="cq:Widget" 
                        html="<img src='/content/dam/geometrixx/icons/target.png'>" 
                        xtype="displayfield" />
                </items>
            </tab1>
        </items>
    </items>
</jcr:root>

将图像 src 替换为您要在对话框中显示的图像的路径。