Angular中的ng-src和ngFor

Question

假设我根据某事物的ID拍摄了一些照片并将其放入如下数组：

data.attributes.photos = [ "12.jpg", "12_1.jpg", "12_2.jpg" , 12_3.jpg, ... ]

并将其与ngFor一起使用：

<ngb-carousel>
        <ng-template ngbSlide *ngFor="let photo of navbar.infoData.attributes.photos">
            <img class="card-img-top img-fluid w-full" [src]="photo" alt="Okul Fotoğrafı Bulunamadı">
        </ng-template>
    </ngb-carousel>

现在Angular中有一个名为 ng-src 和 on-error 的东西，它显示了当数组中没有任何图像时的样本图像。

像这样：

 <ngb-carousel>
                            <ng-template ngbSlide *ngFor="let photo of navbar.infoData.attributes.photo">
                                <img class="card-img-top img-fluid w-full" ng-src={{photo}}}  err-SRC="http://google.com/favicon.ico" alt="Okul Fotoğrafı Bulunamadı">
                            </ng-template>
                        </ngb-carousel>

它可能有效，但因为我不知道图像的数量。如果我的src的url中不存在该图像，是否可能无法显示该图像？

Answer 1

您可以使用

someUrl

检查加载someUrl是否会导致错误，然后更新{{1}}以加载替代图像。

有关示例，请参阅Angular 2 - Check if image url is valid or broken。