kolkov / ngx-gallery

A simple responsive native gallery component for Angular 8+.
https://ngx-gallery.kolkov.ru/
MIT License
115 stars 56 forks source link

ERROR TypeError: "url is undefined #3

Closed yuniers closed 4 years ago

yuniers commented 4 years ago

When I try reproduce the example of .README file I get this error:

ERROR TypeError: "url is undefined"
    validateUrl kolkov-ngx-gallery.js:29
    getBackgroundUrl kolkov-ngx-gallery.js:38
    getSafeUrl kolkov-ngx-gallery.js:684
    View_NgxGalleryImageComponent_1 NgxGalleryImageComponent.html:7
    Angular 56
    RxJS 5
    Angular 9
NgxGalleryImageComponent.html:2:2
    View_NgxGalleryImageComponent_1 NgxGalleryImageComponent.html:2
    Angular 15
    RxJS 5
    Angular 9

My problem is related with validateUrl function used on: https://github.com/kolkov/ngx-gallery/blob/d6f4bf473a224ae2916e7ecc35ac6bf69c41ef95/projects/gallery/src/lib/ngx-gallery.service.ts#L29

kolkov commented 4 years ago

Hi! What version of this package and Angular you are using?

yuniers commented 4 years ago

@kolkov I'm using Angular 8.2.14 and "@kolkov/ngx-gallery": "^1.0.9"

My image array is:

[
  {
    "big": "http://localhost/wp-content/uploads/2019/05/la-guarida8.jpg",
    "description": "la-guarida8",
    "url": "http://localhost/wp-content/uploads/2019/05/la-guarida8.jpg"
  },
  {
    "big": "http://localhost/wp-content/uploads/2019/05/la-guarida3.jpg",
    "description": "la-guarida3",
    "url": "http://localhost/wp-content/uploads/2019/05/la-guarida3.jpg"
  },
  {
    "big": "http://localhost/wp-content/uploads/2019/05/la-guarida1.jpg",
    "description": "la-guarida1",
    "url": "http://localhost/wp-content/uploads/2019/05/la-guarida1.jpg"
  },
  {
    "big": "http://localhost/wp-content/uploads/2019/07/CARTEL-Gibara.jpg",
    "description": "cartel-gibara",
    "url": "http://localhost/wp-content/uploads/2019/07/CARTEL-Gibara.jpg"
  }
]
kolkov commented 4 years ago

Try to use this example at first: https://github.com/kolkov/ngx-gallery/blob/master/projects/gallery-app/src/app/app.component.ts

yuniers commented 4 years ago

Try to use this example at first: https://github.com/kolkov/ngx-gallery/blob/master/projects/gallery-app/src/app/app.component.ts

@kolkov I follow that example but result is not like I was expect. Never I see icons when I click on a image like https://lukasz-galka.github.io/ngx-gallery-demo/

But, I can't use images without host because I use a CDN service to host my images.

kolkov commented 4 years ago

I mean that you should use small, big instead url.

kolkov commented 4 years ago

https://stackblitz.com/edit/kolkov-ngx-gallery like this.

kolkov commented 4 years ago

I can't reproduce this bug, provide an repo please.

kolkov commented 4 years ago

And notice please, url is link from thumbnails...