Set background image url using inline css in react js

Question

I have setted inline css using react method but Compiler showing "unexpected token error" where i have declare image url, here is my file code -

class Aboutus extends React.Component {
    constructor(props){
        super(props);
        document.title = "About Us";
    }

    var imgUrl_1 = '/images/about/parallax.jpg';
    const style_1 = {
            padding: '250px 0', 
            backgroundImage: 'url('+imgUrl_1+')',
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
        };

    var img_url2 = '/images/team/3.jpg';
    const style_2 = {
        backgroundImage: 'url('+img_url2+')', 
        backgroundPosition: 'center center no-repeat',
        backgroundSize: 'cover',    
        };

    const style_3 = { backgroundColor: '#F5F5F5'};  

    render(){
        return(
            <DefaultLayout>
                <section id="page-title" class="page-title-parallax page-title-dark" style={style_1} data-stellar-background-ratio="0.4">

                    <div class="container clearfix">
                        <h1>About Us</h1>
                        <span>Everything you need to know about our Company</span>
                        <ol class="breadcrumb">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Pages</a></li>
                            <li class="active">About Us</li>
                        </ol>
                    </div>

                </section>


                <section id="content">
                    <div class="content-wrap">
                        <div class="row common-height clearfix">
                            <div class="col-sm-5 col-padding" style={style_2} ></div>
                            <div class="col-sm-7 col-padding">
                                <div>
                                    <div class="heading-block">
                                        <span class="before-heading color">CEO &amp; Co-Founder</span>
                                        <h3>John Doe</h3>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="row common-height bottommargin-lg clearfix">
                            <div class="col-sm-7 col-padding" style={style_3} >
                                <div>
                                    <div class="heading-block">
                                        <span class="before-heading color">Developer &amp; Evangelist</span>
                                        <h3>Mary Jane</h3>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>

                </section>
            </DefaultLayout>
        );  
    }
}

export default Aboutus;

It giving error here -

Unexpected token (11:5)    9 |  }
  10 |  
> 11 |  var imgUrl_1 = '/images/about/parallax.jpg';

please let me know what I am doing wrong here .

Answer 1

The problem isn't with the variable it self, but where you've put it. Right now it is define inside your class, but not inside any method.

Try moving it either to your constructor or to your render method.

Also, background-image with an url needs to have quotes between the parenthesis. So change that from:

backgroundImage: 'url('+imgUrl_1+')'

to:

backgroundImage: 'url("'+imgUrl_1+'")'

---

Alternative 1

Here's one of possible solution. Change your code to:

class Aboutus extends React.Component {
  constructor(props){
    super(props);
    document.title = "About Us";
  }

  render(){
    var imgUrl_1 = '/images/about/parallax.jpg';
    const style_1 = {
        padding: '250px 0', 
        backgroundImage: 'url("'+imgUrl_1+'")',
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
    };

    var img_url2 = '/images/team/3.jpg';
    const style_2 = {
      backgroundImage: 'url("'+img_url2+'")', 
      backgroundPosition: 'center center no-repeat',
      backgroundSize: 'cover',    
    };

    const style_3 = { backgroundColor: '#F5F5F5'};

    return (
      ...

---

Alternative 2

You could also do:

class Aboutus extends React.Component {
  constructor(props){
    super(props);
    document.title = "About Us";
    this.imgUrl_1 = '/images/about/parallax.jpg';
    this.style_1 = {
        padding: '250px 0', 
        backgroundImage: 'url("'+this.imgUrl_1+'")',
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
    };
    this.img_url2 = '/images/team/3.jpg';
    this.style_2 = {
      backgroundImage: 'url("'+this.img_url2+'")', 
      backgroundPosition: 'center center no-repeat',
      backgroundSize: 'cover',    
    };
    this.style_3 = { backgroundColor: '#F5F5F5'};
  }

  render(){    
    return(
      ...

then just use this.imgUrl_1, etc in your render.

Answer 2

You cannot declare a string var in the Component class directly

Specify it inside the constructor for your use case function

constructor() {
     super();

      this.imgUrl_1 = '/images/about/parallax.jpg';  
      this.img_url2 = '/images/team/3.jpg';
}

render(){
 const style_1 = {
        padding: '250px 0', 
        backgroundImage: `url(${this.imgUrl_1})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
    };
 const style_2 = {
    backgroundImage: `url(${this.imgUrl_2})`, 
    backgroundPosition: 'center center no-repeat',
    backgroundSize: 'cover',    
    };
        return(
            <DefaultLayout>
                <section id="page-title" class="page-title-parallax page-title-dark" style={style_1} data-stellar-background-ratio="0.4">

                    <div class="container clearfix">
                        <h1>About Us</h1>
                        <span>Everything you need to know about our Company</span>
                        <ol class="breadcrumb">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Pages</a></li>
                            <li class="active">About Us</li>
                        </ol>
                    </div>

                </section>


                <section id="content">
                    <div class="content-wrap">
                        <div class="row common-height clearfix">
                            <div class="col-sm-5 col-padding" style={style_2} ></div>
                            <div class="col-sm-7 col-padding">
                                <div>
                                    <div class="heading-block">
                                        <span class="before-heading color">CEO &amp; Co-Founder</span>
                                        <h3>John Doe</h3>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="row common-height bottommargin-lg clearfix">
                            <div class="col-sm-7 col-padding" style={style_3} >
                                <div>
                                    <div class="heading-block">
                                        <span class="before-heading color">Developer &amp; Evangelist</span>
                                        <h3>Mary Jane</h3>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>

                </section>
            </DefaultLayout>
        );  
    }