[ngStyle] Angular 2中未顯示背景圖像

Question

我在嘗試在div中顯示圖像時遇到了麻煩，我有點不明白為什么，有人可以幫我嗎？ 我知道這些方法有效，因為我在不同的地方使用了它們，但是我不確定div的格式是否正確。

<div class="attachment-element" [ngStyle]="{'background-image': 'url(' + isPdf(imgUri) ? 'assets/img/pdf_preview.png' : imgUri + ')'}">

Answer 1

僅使用樣式的background屬性，如下所示

<div class="attachment-element" [ngStyle]="{'background': 'url(' + isPdf(imgUri) ? 'assets/img/pdf_preview.png' : imgUri + ')'}">

Answer 2

由於運算符優先級 ，您的圖像URL表達式等效於以下內容：

('url(' + isPdf(imgUri)) ? 'assets/img/pdf_preview.png' : (imgUri + ')')

導致格式不正確。 有關演示，請參見此堆疊閃電戰 。

---

您應該在條件運算符兩邊加上括號以獲取適當的格式：

'url(' + (isPdf(imgUri) ? 'assets/img/pdf_preview.png' : imgUri) + ')'

有關演示，請參見此堆疊閃電戰 。