Angular中ngFor遍历图片数组，如何不显示不存在的图片？

没问题！要实现图片URL不存在时不显示对应的轮播slide，你可以从提前过滤有效图片或者加载失败后动态移除slide这两个方向入手，下面给你具体的实现方案：

这种方式是在渲染模板前就验证每一张图片的可用性，只保留能正常加载的图片，好处是减少不必要的DOM渲染，避免空slide出现。

步骤： #

1. 在组件类中添加检测图片是否存在的辅助方法，以及过滤有效图片的逻辑：

// 检测单张图片是否可加载的异步方法
private checkImageExists(url: string): Promise<boolean> {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    img.src = url;
  });
}

// 过滤出所有有效图片的方法
async filterValidPhotos() {
  const rawPhotos = this.navbar.infoData.attributes.photos;
  this.validPhotos = [];
  
  for (const photoUrl of rawPhotos) {
    const isAvailable = await this.checkImageExists(photoUrl);
    if (isAvailable) {
      this.validPhotos.push(photoUrl);
    }
  }
}

2. 在组件初始化时调用过滤方法（比如在ngOnInit钩子中）：

ngOnInit(): void {
  this.filterValidPhotos();
}

3. 修改模板，遍历过滤后的validPhotos数组，同时添加*ngIf确保只有有有效图片时才渲染轮播：

<ngb-carousel *ngIf="validPhotos?.length > 0"> 
  <ng-template ngbSlide *ngFor="let photo of validPhotos"> 
    <img class="card-img-top img-fluid w-full" 
         [src]="photo" 
         alt="Okul Fotoğrafı"> 
  </ng-template> 
</ngb-carousel>

如果不需要提前过滤，也可以在图片加载失败的瞬间，把对应的slide从DOM中直接移除，这种方式更即时，不需要等待所有图片验证完成。

步骤： #

1. 修改模板，给每个ngbSlide添加模板引用变量，同时给img元素绑定error事件：

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

2. 在组件类中实现移除slide的方法：

removeInvalidSlide(slideRef: any): void {
  // 获取slide对应的原生DOM元素并移除
  const slideElement = slideRef.elementRef.nativeElement;
  slideElement.remove();

  // 可选：如果所有slide都被移除，隐藏轮播组件
  const carousel = document.querySelector('ngb-carousel');
  if (carousel && carousel.children.length === 0) {
    carousel.style.display = 'none';
  }
}

小提示 #

• 方法1的异步验证可能会有短暂延迟，你可以添加加载动画提示用户正在处理图片。
• 方法2是客户端实时处理，不会修改原始的图片数组，适合不需要保留过滤后数据的场景。

内容的提问来源于stack exchange，提问作者MadMax