如何解决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 举报,一经查实,本站将立刻删除。