[英]How to set background image image path in Angular 6
<!----- 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">
用它来肆意选择
[style.backgroundImage]="'url('+ imagSource +')'"
在CSS中:
.item{
background-position: center;
background-repeat: no-repeat;
.
.
.
}
以下答案适用于角度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中设置背景图像。
如果您想在应用程序的父标签(假设标签)上设置背景图片,最简单的解决方案是使用jQuery。
$("body").css("background-image", "url('http://placehold.it/30x30')");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.