如何渲染由flux:field.file ViewHelper选择的图片？

我的配置如下：

<f:section name="Configuration">
      <flux:form id="tabslide">
         <flux:form.option.group value="myvalue" />
         <flux:form.section name="slideItems">
            <flux:form.object name="slideItem">
               <flux:field.input name="myinput" label="My Input" />
               <flux:field.file name="myfile" label="图片" allowed="jpg,png,svg,gif" showThumbnails="1" useFalRelation="TRUE" minItems="0" maxItems="1" />
            </flux:form.object>
         </flux:form.section>
      </flux:form>
</f:section>

我尝试了以下代码但无法正常渲染：

<f:for each="{slideItems}" as="element" key="id">
    <f:image src="{element.myfile}"/>
</f:for>

因为你开启了useFalRelation="TRUE"，此时element.myfile存储的是TYPO3文件引用（FileReference）对象，而非直接的文件路径，所以无法直接传入f:image的src参数。可以通过以下两种方式正确渲染：

方式一：使用文件引用UID（推荐） #

利用TYPO3标准的file:{uid}格式引用文件，同时增加判断避免无图片时报错：

<f:for each="{slideItems}" as="element" key="id">
    <f:if condition="{element.myfile}">
        <f:image src="file:{element.myfile.uid}" alt="自定义图片描述" width="300" />
    </f:if>
</f:for>

方式二：直接调用文件公网URL #

如果需要直接输出文件路径，可使用FileReference对象的publicUrl属性：

<f:for each="{slideItems}" as="element" key="id">
    <f:if condition="{element.myfile}">
        <img src="{element.myfile.publicUrl}" alt="自定义图片描述" />
    </f:if>
</f:for>

内容的提问来源于stack exchange，提问作者firecase