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

Question

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

 <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 

谁能帮助我。谢谢。

Answer 1

我建议在控制器中建立styleString。 只需在代码中使用一个简单变量即可。 这样更清洁。

Answer 2

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

因此，请尝试仅使用以下代码进行property binding

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

希望这会帮助你。

Answer 3

尝试以下方法：

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

从角度v4起可以正常使用

Answer 4

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

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

Answer 5

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

Angular2动态背景图片

Angular 2中背景图片网址的属性属性绑定

谢谢