Question

我正在使用

角

我正在尝试做什么

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

问题

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

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

Answer 1

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

<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

Answer 2

<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>

角度 - NgStyle后退图像

2 个答案: