AEM6 - 图像组件 - 我无法将图像渲染为背景

Question

我正在使用tne sling组件/ libs / wcm / foundation / components / image。

我需要将渲染图像用作css背景。

<img src="${image.src} /> -> OK: works

<div style="background-image: url('${image.src}')">my text</div> -> KO:  does not work. 

结果为<div style="background-image: url('')">my text</div>

我在Chrome，FF和IE上尝试过它。

任何人都可以帮我解决这个问题吗？

由于

Answer 1

在指定显示上下文时，会立即自动转义值以防止跨站点脚本问题。对于CSS字符串，使用显示上下文styleString，以便它编码将突破字符串的字符。

<div style="background-image: url('${image.src @ context='styleString'}')">my text</div>

有关显示上下文的更多信息，请参阅Sightly docs

Answer 2

请试试这个：

style="background-image:url('${image.src @ context='unsafe'}')"