Html AEM 6.2中的style元素中未解析运行时变量

我试图通过在sightly中创建一个变量来为div提供背景图像

我正在用sightly阅读一个属性，当我将它提供给样式标记时，它不起作用

这是html

<sly data-sly-test.fileReference="${properties.title}" />

<div style="background: url(${fileReference}); background-position: center top;">
<p>${properties.title}</p>

${properties.title}

当页面呈现时，这就是我看到的

<div style="background: url(); background-position: center top;">
<p>my Title</p></div>

我的头衔

---

这意味着

${properties.title}

标记内的

被接受，但它不适用于内部样式元素。

变量解析得很好。

url（）

值为空的原因是您没有使用正确的。另外，您传递到那里的值，字符串

“我的标题”

，不是有效的URL（您需要打印的内容）或有效的样式标记（通常在

样式

属性中呈现的内容）

您会注意到，以下每个表达式都呈现一个空的

url（）

值：

<div style="background: url(${'cookies'});"></div>
<div style="background: url(${'cookies with chocolate chips'});"></div>

<!--/* both print background: url();*/-->

好了，这就是诀窍

现在，作为一个建议，尽量避免内联样式。您将在显示上下文中避免类似的问题，如果您的CSS是客户端库的一部分，您的CSS将更易于维护。

这对我很有用---添加@context='styleToken'

<sly data-sly-test.fileReference="${properties.title}" />
<div style="background: url(${fileReference @ context='styleToken'}); background-position: center top;">
<p>${properties.title}</p>

${properties.title}

这基本上是正确的，只有一点需要澄清：对于样式和脚本上下文，必须设置上下文。如果未设置上下文，则表达式不应输出任何内容。请参阅@Vlad感谢您的澄清，我认为该属性使用了

styleToken

。去显示我很少使用HTL来呈现CSS：）无论如何，我修正了答案。

<div style="background: url('${'/etc/designs/myapp/img/someimage.png' @ context='uri'}');">
</div>
<!--/* prints background: url('/etc/designs/myapp/img/someimage.png');*/-->

<sly data-sly-test.fileReference="${properties.title}" />
<div style="background: url(${fileReference @ context='styleToken'}); background-position: center top;">
<p>${properties.title}</p>