如何设置 Angular 4 背景图像？答案

【问题标题】：How to set Angular 4 background image?如何设置 Angular 4 背景图像？
【发布时间】：2017-08-11 10:13:36
【问题描述】：

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

app.component.html

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

【问题讨论】：

你能得到图片吗：style="background:'url(./images/trls.jpg)""
Background image in Angular 2的可能重复

标签： javascript angular

【解决方案1】：

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

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

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

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

【讨论】：

您忘记在第一个解决方案中添加右花括号。应该是
感谢您的提示。
更新了答案@BiswajitPanday。谢谢！
嗨。我有完全相同的问题，但这里的答案对我的情况没有帮助。
@AkshayRaut，你的图片保存在哪里？你能分享完整的路径吗？
@AkashAgrawal 使用[style.background-image] 来避免覆盖已经设置的css属性不是更好吗？

【解决方案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')";
}

【讨论】：

如果你的 url 和我的一样有空格，你可能还想做一个 .replace(/\s/g, "%20") .

【解决方案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 中设置背景图片了。

【讨论】：

整个互联网上唯一对我有用的代码。谢谢你一百万次！
这不是 Angular，它只是普通的 HTML 和 CSS
我完全同意！我只是说下面的内容对我有用 :)
这不是答案：他在问如何通过js动态更改复制的图像地址值。
@SachinHatikankan ，此解决方案不适用于从 api 放置图像 url。这只是简单的 html&&css 解决方案。例如，要编写一些将获取的 url 以角度形式放入背景图像的内容，可以使用 [ngStyle]

【解决方案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>

【讨论】：

【解决方案5】：

在 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

【讨论】：

【解决方案6】：

这对我也适用于 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;
  }

【讨论】：

带有 src 的路径无法在构建中工作，dist 下没有 src 目录
netalex，这个解决方案似乎减慢了进程。阅读有关放置已获取数据和从函数读取数据的速度。有时它是从函数中获取数据的解决方案，我并不是说它不好。但是，在某些情况下，将函数放入模板中会很慢。在这种情况下，最好将this.background放在[ngStyle]中，在css/scss/etc中写额外的样式。文件，恕我直言。

【解决方案7】：

我想要一张 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;
    }

请注意，如果您在[ngStyle] 中写background 而不是'background-image'，则您为其他背景属性（例如背景位置/大小等）编写的样式（即使在元素的style 中）将不会不工作。因为您已经使用background: 'url(+ property +) (no providers for size, position, etc. !)' 修复了它的属性。 [ngStyle] 优先级高于元素的style。在background 这里，只有 url() 属性可以工作。请务必使用'background-image' 而不是'background'，以防您想向背景图像写入更多属性。

【讨论】：