Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set background image url using inline css in react js

Tags:

reactjs

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 .

like image 931
Atul Avatar asked Jun 01 '17 07:06

Atul


2 Answers

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.

like image 82
Chris Avatar answered Oct 10 '22 06:10

Chris


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>
        );  
    }
like image 29
Shubham Khatri Avatar answered Oct 10 '22 05:10

Shubham Khatri