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

当我想将图像网址添加到样式属性中时，通常会执行以下操作：

<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>

如果图像不存在，那只会将其留空。尽管我经常遇到“其他”情况，但我使用自定义的视图帮助器之一生成占位符图像。

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

1 个答案: