Search code examples
aemsling

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

I'm using tne sling component /libs/wcm/foundation/components/image.

I need to use the rendering image as css background.

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

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

The result is <div style="background-image: url('')">my text</div>

I tried it on Chrome, FF and IE.

Can anyone help me solve this problem ?

Thanks

Solution

  • Please try this:

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