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

你可以使用

<img [src]="someUrl" (error)="updateUrl($event)">

检查加载someUrl 是否会导致错误，然后例如更新someUrl 以加载一些替代图像。

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