如何在Fluid模板行内样式中使用变量设置background-image背景图

变量定义优化（可选但更稳妥） #

原变量定义嵌套了ViewHelper标签，容易出现解析优先级问题，推荐改成Fluid内联表达式写法：

<v:variable.set name="imageKey" value="{f:uri.resource(path: image.identifier)}"/>

行内样式正确写法 #

直接拼接样式字符串即可，不需要用嵌套对象语法：

<div class="container" style="background-image: url('{imageKey}')">
  <div class="image"></div>
</div>

如果需要使用Fluid的样式数组语法，正确格式如下：

<div class="container" style="{background-image: 'url({imageKey})'}">
  <div class="image"></div>
</div>

原写法错误原因 #

• 错误使用了嵌套对象结构，url()是background-image的属性值内容，不需要单独作为键值
• 多余的大括号嵌套会导致Fluid解析变量失败
• 没有给url路径加引号，路径含特殊字符时会解析异常

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