无法在AEM 6.2的fileupload组件中查看预览图像

我正在使用fileupload组件在初始创建对话框中将图像呈现为页面的一部分

<image
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/form/fileupload"
        cq-msm-lockable="jcr:file"
        autoStart="{Boolean}false"
        class="cq-droptarget"
        fieldLabel="Hero Image (large)"
        fileNameParameter="./image/fileName"
        fileReferenceParameter="./asset"
        mimeTypes="[image]"
        multiple="{Boolean}false"
        name="./image/file"
        title="Upload Image Asset"
        uploadUrl="${suffix.path}/image/file"
        useHTML5="{Boolean}true"/>

我尝试了uploadUrl | fileNameParameter | fileReferenceParameter和name字段的多种变体，但无法在“属性”对话框中看到预览图像

但是，我确实在CRXDE中看到了图像数据。

---

是否有人可以共享fileupload in对话框的工作实现？这是AEM 6.2的版本。

好的，所以这比我希望的简单配置更改要复杂一些。所有的功劳都归功于谁发现了这一点

<file
        autoStart="{Boolean}false"
        class="cq-droptarget"
        fieldLabel="Hero Image (large)"
        fileNameParameter="./image/fileName"
        fileReferenceParameter="./image/fileReference"
        jcr:primaryType="nt:unstructured"
        mimeTypes="[image]"
        multiple="{Boolean}false"
        name="./image/file"
        sling:resourceType="granite/ui/components/foundation/form/fileupload"
        title="Upload Image Asset"
        uploadUrl="${suffix.path}"
        useHTML5="{Boolean}true"
        />

就这样，这将允许可拖动或上传的文件显示预览和正确的图像

为了完整起见，这里使用了HTML，其中数据是javascript的返回值

<div class="${data.imagesize} ${data.imageBackgroundColor ? 'icon' : ''}" style="${data.image @ context='styleString'}"></div>

您看过浏览器开发工具吗？特别是错误控制台。因为图像可能由于某些原因被阻止。例如：调度程序可能配置错误并阻止对资源的请求。@Jens返回404 Not Found错误，调度程序是否仍可能阻止请求？->在这种情况下，我预期会出现不同的错误。如果dispatcher已阻止，则404是预期的错误；如果您在路径上遵循允许/不允许的标准配置，则映像是预期的错误。Disallow将返回404。请尝试直接访问实例，通过指定端口和IP地址，您将绕过dispatcher。确保在Author实例前面设置了一个调度程序。@toniedzwiedz目前根本不使用调度程序，通过4502访问站点。

var image = currentNode.hasNode('image') ? currentNode.getNode('image') : null;

if (image) {
   ret.image = image.hasProperty('fileReference') ? image.getProperty('fileReference') : null;
}

if (!ret.image) {
    try {
        var res = image.hasNode("file") ? image.getNode("file") : null;
        ret.image = res.getPath();
        ret.image = "background-image: url("+ ret.image + ");";
    } catch(err) {
        ret.image = "background-image: url(http://placehold.it/150x150?text=Placeholder);";
    }
} else {
   ret.image = "background-image: url(" + ret.image + ");";
}

<div class="${data.imagesize} ${data.imageBackgroundColor ? 'icon' : ''}" style="${data.image @ context='styleString'}"></div>