在流体模板中渲染图像（如果存在）？

Question

如何使用f:if在尝试渲染图像之前查看图像是否存在？

我尝试了以下但没有成功：

{f:if(condition: page.files.0, then: ' style="background-image:url({f:uri.image(image:page.files.0, width:300c, height:200c)}"')}

<f:if condition="{page.files.0}">
    style="background-image:url({f:uri.image(image:page.files.0, width:300c, height:200c)}"
</f:if>

如果有图像就可以工作，但如果没有图像就会破坏元素。

Answer 1

当我想在样式属性中添加图片url时，我通常会这样做：

<f:if condition="{page.files.0}">
    <f:variable name="imageUri" value="{f:uri.image(
        image: page.files.0,
        width: '300c',
        height: '200c')}"/>
</f:if>

<div style="background-image: url('{imageUri}');">
   ...
</div>

如果图像不存在，那只会将其留空。虽然我经常遇到 "else" 情况，但我使用我的自定义 viewhelper 之一生成占位符图像。

在流体模板中渲染图像（如果存在）？

Render image in fluid template if it exists?

typo3

fluid

fluid-styled-content

typo3-9.x