[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

由于operator precedence，您的图片网址表达式等同于以下内容：

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

这将导致格式错误。有关演示，请参见this stackblitz。

---

您应该在条件运算符两边加上括号，以获取适当的格式：

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

有关演示，请参见this stackblitz。