Inline CSS with dynamic values in LWC

Question

I have come to a problem, where i dont know how to use dynamic inline css together with classic static attributes and properties.

I have a iterator, which is going over a JSON file, where i stored some information i need to display. To be exact, i have a link to an image inside the JSON which i want to use in style="background-image:"

vehicle is my item that I iterate over and image is the url to the stored image.

<label for={index} class="css-label" style="background-image:{vehicle.image}"></label>

style="background-image:{vehicle.image}" is not working. Thanks for any advice.

Answer 1

You can't use dynamic expressions like that LWC; this only works in Aura. Instead, set a new attribute for the style:

style={vehicle.imageStyle}

Which will require you to modify your data:

this.vehicles = data.map(record => ({...record, imageStyle: `background-image: url(
${record.image}")`);