如何在Angular 6中设置背景图像图像路径答案

【问题标题】：How to set background image image path in Angular 6如何在Angular 6中设置背景图像图像路径
【发布时间】：2018-07-19 11:26:39
【问题描述】：

<!----- home banner   ---->
<div class="home-slider">
  <ngx-slick class="carousel" [config]="slideConfig">
    <div ngxSlickItem *ngFor="let slide of slides" class="slide">
      <div class="banner">
        <img class="img-responsive" src="{{ slide.img }}" alt="" width="100%">
      </div>
    </div>
  </ngx-slick>
</div>

<!----==== 3 content ----==================--->
<div class="dis_content">
  <div class="container">
    <div class="col-md-4 text-center">
      <i class="fa fa-google-wallet " aria-hidden="true"></i>
      <h4>Discount System</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
    </div>
    <div class="col-md-4 text-center">
      <i class="fa fa-codepen " aria-hidden="true"></i>
      <h4>Free Delivery</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
    </div>
    <div class="col-md-4 text-center">
      <i class="fa fa-circle-o-notch " aria-hidden="true"></i>
      <h4>Support 24/7</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus.</p>
    </div>
  </div>
</div>


<!---======  4 images =============------------>
<div class="ldy-page">
  <div class="container-fluid">
    <div class="col-md-3">
      <div class="ldy1">
      </div>
    </div>
    <div class="col-md-3">
      <div class="ldy1">
      </div>
    </div>
    <div class="col-md-3">
      <div class="ldy1">
      </div>
    </div>
    <div class="col-md-3">
      <div class="ldy1">
      </div>
    </div>
  </div>
</div>

<owl-carousel [options]="{items: 3, dots: false, navigation: false}" <!-- If images array is dynamically changing pass this array to [items] input -->
  [items]="images"
  <!-- classes to be attached along with owl-carousel class -->
  [carouselClasses]="['owl-theme', 'row', 'sliding']">
  <div class="item" *ngFor="let sliding of slidings;let i = index">
    <div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
  </div>
</owl-carousel>

如何在我的页面中设置图片和背景图片路径？我将图像设置在home.components.ts 文件上。 Angular 6中如何设置背景图片和图片路径？

[{'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">

【问题讨论】：

你用的是angular 6还是angularjs？？

标签： javascript html css jquery-ui angular6

【解决方案1】：

用它来寻找选择器

[style.backgroundImage]="'url('+ imagSource +')'"

在css中：

.item{
    background-position: center;
    background-repeat: no-repeat;
    .
    .
    .
}

【讨论】：

告诉我以获得更多帮助！
我不知道如何将图像设置为角度 6。所以简要解释一下
在您的组件中，在参数中设置图像的 url，并在 html 中用作我的答案 imagSource 表示来自组件的参数

【解决方案2】：

以下答案适用于角度 6。

在app.component.css

中

    .image{
         height:40em; 
         background-size:cover;
         width:auto;
         background-image:url('copied image address');
         background-position:50% 50%;
       }

同样在 app.component.html 中添加如下

<div class="image">
Your content
</div>

这样我就可以在 Angular 6 中设置背景图片了。

【讨论】：