如何设置Angular 4背景图片？

Question

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

app.component.html

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

Answer 1

尝试使用以下内容:

<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

如果您计划在整个项目中大量使用背景图像，您可能会发现创建一个非常简单的自定义管道来为您创建 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>