问题
How can I use f:if
to see if an image exists before trying to render it?
I have tried the following without success:
{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>
It works if there is an image but breaks the element when there is not.
回答1:
When I want to add an image url to the style attribute, I usually do something like this:
<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>
That would simply leave it empty in case the image does not exist. Though I often have an "else" case, where I use one of my custom viewhelpers to generate a placeholder image.
来源:https://stackoverflow.com/questions/58402958/render-image-in-fluid-template-if-it-exists