在Angular 4中动态设置背景图像的推荐方法是什么？

Question

目前我正在使用内嵌式设置图像背景。

<div [ngStyle]="{background: 'url(' + section.backgroundSrc + ') no-repeat'}">

然而，我正在寻找一种更清洁的方法......也许就像通过角度动态设置外部样式表中的路径一样。但是，我不确定如何做到这一点。

Answer 1

你不能通过CSS文件来做。但是，您可以使当前代码更简洁：

<div [style.background]="'url(' + section.backgroundSrc + ') no-repeat'"></div>

如果角度引发安全错误，您还必须进行消毒。所以你会做这样的事情： 在HTML文件中 -

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

在您的TS文件中

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

Answer 2

此代码对我有用。

[style.backgroundImage]="'url('+MEDIA_URL +'/dir/'+data.image+')'"

MEDIA_URL是上载位置的基本URL。

Angular CLI：6.1.3 角度：6.1.2

Answer 3

感谢Harsha Sampath。 我做到了：

[style.backgroundImage]="'url('+urlToImage+')'"

可在Angular 8中使用 urlToImage是组件的字符串属性，可在运行时解析。

背景的其他设置已在CSS中固定：

background-repeat: no-repeat;
background-position:center center;
background-size: 100% 100%;

Answer 4

这是最好的和容易处理的

[ngStyle]="{'background': 'url(' +(user.photo ? user.photo : '')+') no-repeat 0 0 / cover'}"

Answer 5

HTML - <div [style.background]="background">

TS - this.section = 'assets/images/bg/waterfallsvg.svg'; this.background = (url(${this.section}) no-repeat);