Code editor cannot process and save a style with dynamic background property

The Wappler code editor changes the following line on saving:

<section class="establishmentpage-header" style="position: relative; background-position: center" dmx-style:background-image="url("'establishment/images/' + serverconnect_establishment.data.query_images[0].path");">

to

<section class="establishmentpage-header" style="position: relative; background-position: center" dmx-style:background-image="url(" 'establishment="" images="" '="" +="" serverconnect_establishment.data.query_images[0].path");"="">

I cannot use a dynamic value for background image. Am I doing it wrong or is Wappler trying to be MS Word? :joy:

Not sure how you have enter this code ( probably by hand) but it is invalid.

You should escape all double quotes within attributes as &quot;

Otherwise it is not a valid html

Also your expression is wrong it should be:

<section class="establishmentpage-header"
 style="position: relative; background-position: center" 
 dmx-style:background-image="'url(&quot;establishment/images/' + serverconnect_establishment.data.query_images[0].path + '&quot;);'">
1 Like

Thanks for the help @George, but the expression is still not showing the background. This is quite tricky with all the single and double quotes. When using the Wappler UI for dynamic attributes, selecting expression and adding everything with normal quotes, does Wappler convert to valid HTML?

Please see page I uploaded here. the green area should display the main image.

http://askbob.co.za/new/establishment.php?id=41

dmx-style:background-image="'url(&amp;quot;establishment/images/' + serverconnect_establishment.data.query_images[0].path + '&amp;quot;);'"

It seems George added an additional ; after the closing bracket. Please remove it and it will be fine.

It should become

dmx-style:background-image="'url(&amp;quot;establishment/images/' + serverconnect_establishment.data.query_images[0].path + '&amp;quot;)'"

1 Like