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

Question

我正在使用吊索组件 /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

请试试这个：

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

Answer 2

当指定显示上下文时，Sightly 会自动转义值以防止跨站点脚本问题。对于 CSS 字符串，使用显示上下文 styleString 以便它对会从字符串中断开的字符进行编码。

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

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

AEM6 - Image component - I'm not able to render image as background