如何将背景图像放入角度2

Posted 2023-02-22

【中文标题】如何将背景图像放入角度2

【英文标题】：How to put background image in angular 2

【发布时间】：2017-10-02 15:24:16

【问题描述】：

我尝试为我的图片添加背景网址

 <div  [ngStyle]="'background-image': 'url(' + https://s3-us-west-2.amazonaws.com/mysite/l/event.photo + ')'"></div>

我收到了这个错误

Parser Error: Got interpolation () where expression was expected 

谁能帮帮我。谢谢。

【问题讨论】：

不能用于ngXXX。

【参考方案1】：

我建议在控制器中构建 styleString。只需在您的代码中使用一个简单的变量。这样干净多了。

【讨论】：

Fribu 无可否认是正确的——您应该将您的数据隐藏起来。如果这次你不想改变你的方式，请删除这样的插值括号：'url(https://s3-us-west-2.amazonaws.com/mysite/l/' + event.photo + ')'

【参考方案2】：

你不能同时使用属性绑定和插值。

所以尝试只使用下面的代码property binding

<div [ngStyle]="'background-image': 'url(https://s3-us-west-2.amazonaws.com/mysite/l/' + event.photo + ')'"></div>

希望这会对你有所帮助。

【参考方案3】：

试试这个：

<div  [ngStyle]="'background-image': 'url('+'https://s3-us-west-2.amazonaws.com/mysite/l/'+event.photo+')'"></div>

在 angular v4 及更高版本中运行良好

【参考方案4】：

你也可以使用[style.background-image]

<div [style.background-image]="'url(https://s3-us-west-2.amazonaws.com/mysite/l/'+ event.photo +')'">

【参考方案5】：

我希望您验证上面的链接，以便更好地了解背景图片

Angular2 dynamic background images

Attribute property binding for background-image url in Angular 2

谢谢