title: How to set background image image path in Angular 6
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!----- home banner   ----&gt;
  &lt;div class="home-slider"&gt;
    &lt;ngx-slick class="carousel" [config]="slideConfig"&gt;
      &lt;div ngxSlickItem *ngFor="let slide of slides" class="slide"&gt;
        &lt;div class="banner"&gt;
          &lt;img class="img-responsive" src="{{ slide.img }}" alt="" width="100%"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/ngx-slick&gt;
  &lt;/div&gt;
  
  &lt;!----==== 3 content ----==================---&gt;
  &lt;div class="dis_content"&gt;
    &lt;div class="container"&gt;
      &lt;div class="col-md-4 text-center"&gt;
        &lt;i class="fa fa-google-wallet " aria-hidden="true"&gt;&lt;/i&gt;
        &lt;h4&gt;Discount System&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 text-center"&gt;
        &lt;i class="fa fa-codepen " aria-hidden="true"&gt;&lt;/i&gt;
        &lt;h4&gt;Free Delivery&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 text-center"&gt;
        &lt;i class="fa fa-circle-o-notch " aria-hidden="true"&gt;&lt;/i&gt;
        &lt;h4&gt;Support 24/7&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!---======  4 images =============------------&gt;
  &lt;div class="ldy-page"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="col-md-3"&gt;
        &lt;div class="ldy1"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
        &lt;div class="ldy1"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
        &lt;div class="ldy1"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
        &lt;div class="ldy1"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;owl-carousel [options]="{items: 3, dots: false, navigation: false}" &lt;!-- If images array is dynamically changing pass this array to [items] input --&gt;
    [items]="images"
    &lt;!-- classes to be attached along with owl-carousel class --&gt;
    [carouselClasses]="['owl-theme', 'row', 'sliding']"&gt;
    &lt;div class="item" *ngFor="let sliding of slidings;let i = index"&gt;
      &lt;div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/owl-carousel&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to set the image and background image path in my page? I set the image on <code>home.components.ts</code> file. How to set the background image and image path in Angular 6?</p>
  
  <pre><code>[{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}] in ng:///AppModule/HomeComponent.html@73:38 (" class="item" *ngFor="let sliding of slidings;let i = index"&gt;
  </code></pre>