try like this:backgroundImage: 'url("'+imgUrl_1+'")'
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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 & 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 & Evangelist</span>
<h3>Mary Jane</h3>
</div>
</div>
</div>
</div>
</div>
</section>
</DefaultLayout>
);
}
<!-- end snippet -->
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 & 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 & Evangelist</span>
<h3>Mary Jane</h3>
</div>
</div>
</div>
</div>
</div>
</section>
</DefaultLayout>
);
}
