Render image in fluid template if it exists?

How can I use f:ifto 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.

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.