CODEWITHSUNDEEP
javascriptangulartypescriptimage-gallery
Pravu
Pravu

Reputation: 608

ngx-gallery not displaying image

I am using @ngx-gallery/lightbox to display an image gallery. But it does not display any images. This I provide some code and Stackblitz demo as your reference

HTML

<button mat-button (click)="lightbox.open(0, 'lightbox')">Open Gallery</button>

Component

 items: GalleryItem[];

  constructor(public gallery: Gallery, public lightbox: Lightbox) {

  }
 ngOnInit() {
    // This is for Basic example
    this.items = imageData.map(item => {
      return new ImageItem(item.srcUrl, item.previewUrl);
    });

    // This is for Lightbox example
    this.gallery.ref('lightbox').load(this.items);
  }

}

Upvotes: 1

Views: 2024

Answers (3)

nitinsingh9x
nitinsingh9x

Reputation: 696

Seems like you have not initialised ImageItem properly, try this

this.items = imageData.map(item => new ImageItem({ src: item.srcUrl, thumb: item.previewUrl }));

instead of 

this.items = imageData.map(item => {
      return new ImageItem(item.srcUrl, item.previewUrl);
    });

Upvotes: 3

ionut-t
ionut-t

Reputation: 1177

The issue is that the ImageItem class expects a single parameter in form of an object.

This should fix your issue:

this.items = imageData.map(item => {
      return new ImageItem({ src: item.srcUrl, thumb: item.previewUrl });
    });

Upvotes: 3

Eliya Cohen
Eliya Cohen

Reputation: 11478

I'm not sure what api u were reading from, but according to their official api, this demo should work

Upvotes: 0

Related Questions