在图形标签中加载后备图片

Question

我正在使用Angular 4.3.0创建包含图像列表的图像库。图像在figure标签中作为背景图像加载。不在img标记中。图像列表将调整为较小的尺寸，并用于填充图库。如果无法使用调整大小的图像，则用例是加载原始图像。

如果原始图像不可用，将加载no-image.png/jpg。我看到了在src标签的img属性中创建了angular指令来处理图像加载失败的解决方案。目前，由于设计和时间限制，我也无法将figure标签更改为img标签。我所做的如下。

<figure [ngStyle]="{'background-image':
                      'url(' + resizedImages[i] + '), 
                       url(' + originalImages[i] + '), 
                       url(' + noImageUrl + ')'}" 
></figure>

此问题是，如果所有3张图像均可用，则将全部加载。因此，如果有20个图像，将有60个图像加载调用。我要实现的是仅在调整大小后的图像不可用时才加载原始图像和无图像。同样，也仅在调整大小的图像和原始图像均不可用时才加载无图像。

Answer 1

我能够实现一种解决方案，该解决方案使用了 @AugustinR 所指出的以下文章中提到的技术。 how can i check if image exists in assets folder using angular 4

我要做的是，使用此技术过滤图像列表以确保可用性，并使用DOM中过滤的图像URL列表来显示图像。

对我有用。很高兴得知是否还有更好的答案。