如何將背景圖像放入角度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中背景圖片網址的屬性屬性綁定

謝謝