Sightly template question

I would expect 'styleToken' or 'styleString' to work here (I always get these two mixed up), but if they are both not working then you should be fine to use 'unsafe' as long as you are sure this is not user-inputted data from end-users. From your example it looks like this may be authored, so you should be safe.

Thank you all for your help.

The issue was the sightly preventing xss attacks

Doing as Price said is the optimal answer.

Thxs Prince for confirming Article workss

Hi Eric,

unsafe does work!! 

I can finally render the background images.

Is this the best solution or is there a way to render the background image while having xss protection?

Can you try with ${bgImage @ context='unsafe'} ? This should hopefully rule out any issues with accessing that property.

Hi Eric

I did as you recommended.  It does not work

There is a syntax error with your expression:

url('${bgImage @ context='styleToken'}');

Remove the outer single quotes. It should look like this:

url(${bgImage @ context='styleToken'});

I can render the uri outside the template

${properties.mobileImage}

${properties.bannerImage}

I can output both of these uri

Also, when I do the following they also render with the background image

<!-- The div disappears when on larger screens -->

<div class="component-mobile-container" style="background-image: url('${properties.mobileImage}');">

      <text>props.title</text>

     ...

</div>

<!-- The div disappears when on smaller screens -->

<div class="component-container" style="background-image: url('${properties.bannerImage}');">

      <text>props.title</text>

     ...

</div>

It is only when I try to use a template it fails

Look at our example that does work. you still must be missing something. Are you sure the dialog nodes match you names in the HTL code?