Question

我正在尝试以下行来设置背景图像。但它不起作用。在我的应用程序中不断设置背景图像的方式是什么。

app.component.html

<div [ngStyle]="{'background' : 'url(./images/trls.jpg)'}">
    <router-outlet></router-outlet>
    <alert></alert>
</div>

Answer 1

您可以使用ngStyle为div设置背景

<div [ngStyle]="{background: 'url(./images/' + trls.img + ')'}"></div>

或者您也可以使用内置的背景样式：

<div [style.background]="'url(/images/' + trls.img + ')'"></div>

Answer 2

这对我有用：

把它放在你的标记中：

<div class="panel panel-default" [ngStyle]="{'background-image': getUrl()}">

然后在组件中：

getUrl()
{
  return "url('http://estringsoftware.com/wp-content/uploads/2017/07/estring-header-lowsat.jpg')";
}

Answer 3

以下答案适用于角度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中设置背景图像。

Answer 4

此人也为我在Internet Explorer中工作：

<div class="col imagebox" [ngStyle]="bkUrl"></div>

...

@Input() background = '571x450img';  
bkUrl = {};   
ngOnInit() {
    this.bkUrl = this.getBkUrl();
  }
getBkUrl() {
    const styles = {
      'background-image': 'url(src/assets/images/' + this.background + '.jpg)'
    };
    console.log(styles);
    return styles;
  }

Answer 5

我想要一张96x96大小的个人资料图片，上面带有来自api的数据。以下解决方案在项目 Angular 7 中对我有用。

.ts：

  @Input() profile;

.html：

 <span class="avatar" [ngStyle]="{'background-image': 'url('+ profile?.public_picture +')'}"></span>

.scss：

 .avatar {
      border-radius: 100%;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      width: 96px;
      height: 96px;
    }

请注意，如果您在background中写'background-image'而不是[ngStyle]，那么您为其他背景属性（例如background-位置/大小等不起作用。因为您已经使用style修复了它的属性。 background: 'url(+ property +) (no providers for size, position, etc. !)'优先级高于元素的[ngStyle]。在此处的style中，仅url（）属性有效。如果要将更多属性写入背景图片，请务必使用background而不是'background-image'。

Answer 6

以HTML格式

<div [style.background]="background"></div>

在打字稿中

this.background= 
this.sanitization.bypassSecurityTrustStyle(`url(${this.section.backgroundSrc}) no-repeat`);

有效的解决方案。

What is the recommended way to dynamically set background image in Angular 4

Answer 7

如果您计划在整个项目中大量使用背景图片，则可能会发现创建一个非常简单的自定义管道（将为您创建网址）很有用。

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>

如何设置Angular 4背景图片？

7 个答案: