Javascript 如何在 Angular 6 中设置背景图像图像路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51421474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set background image image path in Angular 6
提问by Bala
<!----- 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>How to set the image and background image path in my page? I set the image on home.components.tsfile. How to set the background image and image path in Angular 6?
如何在我的页面中设置图片和背景图片路径？我将图像设置在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">
回答by ???? ????
use it to wantet selector
用它来选择选择器
[style.backgroundImage]="'url('+ imagSource +')'"
in css:
在 CSS 中：
.item{
background-position: center;
background-repeat: no-repeat;
.
.
.
}
回答by R.Gopalakrishnan
Below answer worked for angular 6.
以下答案适用于角度 6。
In app.component.css
在app.component.css 中
.image{
height:40em;
background-size:cover;
width:auto;
background-image:url('copied image address');
background-position:50% 50%;
}
Also in app.component.htmlsimply add as below
同样在app.component.html 中简单地添加如下
<div class="image">
Your content
</div>
This way I was able to set background image in Angular 6.
这样我就可以在 Angular 6 中设置背景图像。
