F7-card background image with props value

Dear community,

i have a problem with the syntax for a background image in an f7-card. The static specification works

background-image: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url(/static/backgrounds/bureau.png)

That shows the image with opacity perfectly. Now I would like to replace bureau.png with the appropriate property

background-image: "='linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url(/static/backgrounds/' + props.image + '.png)'"

No matter how I try the apostrophes no image is displayed

Thanks for any tip and best regards
Arne

There are a couple of things going on here. The less important issue is that you don’t need both the double quotes and the single quotes in this statement. The way the yaml + expression parser works, you usually only need ="..." or ='...'. You do see a lot of exmaples around the forum (and in the default text that comes in the new widget window) of '="..."' but that is only for instances where the string contains a :.

Yaml, of course, uses the colon as the marker between the property name and the property value so if you try to have a property value with a : in it, the yaml parser gets confused unless that : is embedded in a string. But, because the widgets allow you to create yaml entries that are passed to a separate javascript expression parser (some of which contain : as part of the js syntax), if you are making an expression (any yaml entry that starts with =) that contains a : then even if that expression contains no js strings the whole expression = and all must be enclosed in a set of quotes. If the expression does contain some js strings then you must use one type of quotes in the expression and wrap the whole expression in the other type of quotes. Your expression has no : in it so there’s no need to worry and you don’t need the outer set of quotes; ='...' or ="..." will be sufficient. This is not a huge issue but it will come in to play with the answer to your question.

The primary issue here is that there are subtle differences between using "..." and '...’ in js expressions. 99% of the time they can be used interchangeably, but one of the few places they cannot is when the string includes a /. If a string is enclosed in "..." then you can use / and it will be interpreted literally. On the other hand, if a string is enclosed in '...' then / is a potential special character and must be escaped to be read literally. In this case \ is the escape character, so \/ is required.

Tl;DR - Solutions:
Either:

background-image: ='linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url(\/static\/backgrounds\/' + props.image + '.png)'

or

background-image: ="linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)), url(/static/backgrounds/" + props.image + ".png)"

Good morning JustinG, thousand thanks for this detailed answer.
It is as a beginner sometimes quite difficult to find the solution, just because in many code examples “” and ‘’ occurs or are also mixed.
The solutions both work perfectly and I know from now on how to create more complex syntax.
Thanks very much and have a great day
Arne

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.