我正在尝试以下几行来设置背景图像。但它不起作用。在我的应用程序中不断设置背景图像的方式是什么。
应用程序组件.html
<div [ngStyle]="{'background' : 'url(./images/trls.jpg)'}">
<router-outlet></router-outlet>
<alert></alert>
</div>
如何设置 Angular 4 背景图片？
IT技术
javascript
angular
2021-03-14 06:16:31
6个回答
您可以使用ngStyle为 div 设置背景
<div [ngStyle]="{background-image: 'url(./images/' + trls.img + ')'}"></div>
或者您也可以使用内置的背景样式：
<div [style.background-image]="'url(/images/' + trls.img + ')'"></div>
这对我有用：
把它放在你的标记中：
<div class="panel panel-default" [ngStyle]="{'background-image': getUrl()}">
然后在组件中：
getUrl()
{
return "url('http://estringsoftware.com/wp-content/uploads/2017/07/estring-header-lowsat.jpg')";
}
以下答案适用于角度 4/5。
在 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 4/5 中设置背景图像。
如果您计划在整个项目中大量使用背景图像，您可能会发现创建一个非常简单的自定义管道来为您创建 url 很有用。
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'asUrl'
})
export class BackgroundUrlPipe implements PipeTransform {
transform(value: string): string {
return `url(./images/${value})`
}
}
然后您可以添加没有所有字符串连接的背景图像。
<div [ngStyle]="{ background: trls.img | asUrl }"></div>
在 HTML 中
<div [style.background]="background"></div>
在typescript中
this.background=
this.sanitization.bypassSecurityTrustStyle(`url(${this.section.backgroundSrc}) no-repeat`);
一个有效的解决方案。