角度 - NgStyle后退图像

时间:2017-10-19 15:11:38

标签: angular

我正在使用

我正在尝试做什么

  • 如果尚未从服务器返回图像,请使用占位符图像

问题

  • 我不确定语法。这里的任何帮助都太棒了!
  • 可能有'?'检查我的ngStyle背景图片?

<div class="image" [ngStyle]="{'background-image': 'url(' + (image.myImage | async)  + ')'}"></div>

2 个答案:

答案 0 :(得分:2)

您的语法是正确的,但要实现您想要的行为,请执行以下操作:

<div *ngIf="image.myImage | async; let img; else loading" 
       class="image" [ngStyle]="{'background-image': 'url(' + img + ')'}">
</div>    

<ng-template #loading>
    <div class="image" [ngStyle]="{'background-image': 'url(/assets/placeholder.png)'}"></div>
</ng-template>

<强> Demo

答案 1 :(得分:1)

<div *ngIf="img" 
   class="image" [ngStyle]="{'background-image': 'url(' + img + ')'}">
 </div>
<div *ngIf="!img" 
   class="image" [ngStyle]="{'background-image':'url(http://via.placeholder.com/350x150)'}">
</div>