Question

您好我开始使用Angular 2并尝试使用光滑的carousel插件。这是使用SlickSliderComponent的组件：

  @Component({
    moduleId: module.id,
    selector: 'banner-main',
    templateUrl: 'HomepageBannerMain.UI.html',
    styleUrls: ['HomepageBannerMain.style.css']
  })
 export class HomepageBannerMainComponent implements OnInit {
  banner: Banners[];

  constructor(private bannerService: Services) {
  }

  ngOnInit() {
   this.getBanner();
   }

   getBanner(): void {
   this.bannerService.GetImage()
    .subscribe(data => {
    this.banner = data;
    }, err=> {
    alert(err);
    })
 }
  ngAfterViewChecked() {
  $('.regular').not('.slick-initialized').slick({
  dots: true,
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  fade: true,
  cssEase: 'linear'
});
}
}

这是html文件：

<section class="regular slider">
  <div *ngFor="let img of banner">
    <img src="data:image/jpg;base64,{{img.image}}">
  </div>
</section>

在index.html中调用光滑库：

<link rel="stylesheet" href="Slick_Slide/slick-theme.css" type="text/css">
<link rel="stylesheet" href="Slick_Slide/slick.css" type="text/css">
<script src="Slick_Slide/jquery-3.3.7.min.js"></script>
<script src="Slick_Slide/slick.min.js"></script>
<script src="Slick_Slide/slick.js"></script>

当我从当地获取图像时，它正常工作。但是，当我得到编码为base64光滑的图像不起作用。我该如何解决？请帮助我。

光滑的旋转木马问题与角2

0 个答案: