Angular Bootstrap Carousel 不显示图像

问题描述

我正在尝试创建自定义图像轮播。我遇到了一个问题，当我上传我的图像时，它们没有出现在轮播中。轮播显示正常，但图像没有。我正在使用 ng-bootstrap。我上传和显示图片的打字稿代码如下：

import { Component,OnInit } from '@angular/core';
import { EmbroideryService } from '../Services/embroidery.service';
import { NgbActiveModal,NgbModal,ModaldismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { Embroidery } from "../models/embroidery";
import { Subscription } from "rxjs";
import { NgbCarouselConfig,NgbSlideEvent,NgbSlideEventSource } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-embroidery',templateUrl: './embroidery.component.html',styleUrls: ['./embroidery.component.css']
})
export class EmbroideryComponent implements OnInit {

   public images: Embroidery[] = [];
   private imageSubscription: Subscription;
   closeResult = '';

  constructor(private embroideryService: EmbroideryService,private modalService: NgbModal,config: NgbCarouselConfig) {
    config.interval = 6000;
    config.wrap = true;
    config.keyboard = true;
    config.pauSEOnHover = false;
  }

  ngOnInit(): void {
    
    this.embroideryService.getEmbroideries();
     this.imageSubscription = this.embroideryService
      .getimagesstream()
      .subscribe((images: Embroidery[]) => {
        this.images = images;
        images.sort();
        images.reverse();
        //console.log(images);
      });
  }

还有我的 HTML 文件：

<ngb-carousel *ngIf="images?.length > 0">
  <ng-template ngbSlide *ngFor="let image of images; let i = index; let last = first;">
    <div class="picsum-img-wrapper">
      <img [src]="image.avatar" [alt]="name">
    </div>
  </ng-template>
</ngb-carousel>

这是组件的样子：

当我不使用轮播显示图像时，它们显示正常。有人可以指导我如何解决这个问题吗？谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）