Use Js value in CSS

Question

I have the URL of an image I'd like to set as background of a div, but I don't know how to do that.

I'm using a @wire method to retrieve name, description and this URL from an obj in Salesforce, so it's saved on a JS variable.

How do I refer that variable in my css?

I tried using inline css like:

<div style={headerURL}></div>

where headerURL is:

get headerURL() {
    return this.obj.headerImageURL;
}

but it gives me an error in VScode and also it's not working.

Any idea of how to solve this?

I think you should put img tag inside a div to add an image something like below : <div class="someClass"> <img src={headerURL}> </div> — Elijah, Commented Jun 29, 2021 at 10:21

Rahul Gawale · Accepted Answer · 2021-06-29 10:31:38Z

0

You can do that using style. Set the style in JS like below.

get headerURL() {
    return `background-image: url("${this.obj.headerImageURL}");`;
}

HTML

<div style={headerURL}></div>

answered Jun 29, 2021 at 10:31

Rahul Gawale

12.3k6 gold badges33 silver badges70 bronze badges

It works! Thanks! Any idea how to get rid of the warnings that vscode gives like "} expected"?
– Francesco Ghiselli
Commented Jun 29, 2021 at 10:48
@FrancescoGhiselli You can ignore that, or use an alternative way of manipulating style using template query selector and JS code from controller.
– Rahul Gawale
Commented Jun 29, 2021 at 10:49
Thanks, I guess I'll look into the query selector method thanks!
– Francesco Ghiselli
Commented Jun 29, 2021 at 11:00

Add a comment |

1 Answer 1