brenoprata10 / ng2-image-viewer

Ng2-Image Viewer for Angular 2+ projects
https://brenoprata10.github.io/ng2-image-viewer/
MIT License
31 stars 60 forks source link

Error when updating images-parameter #21

Open reberinformatik opened 5 years ago

reberinformatik commented 5 years ago

With #20 there seems to be an issue with the reinstantiation of ImageViewer.

The update of the [images]-parameter lead to the following error:

ImageViewComponent.html:2 ERROR Error: An image viewer is already being initiated on the element.     at ImageViewer._findContainerAndImageSrc (ImageViewer.js:239)     at new ImageViewer (ImageViewer.js:190)     at ImageViewerComponent.inicializarImageViewer (ng2-image-viewer.umd.js:215)     at ImageViewerComponent.imagesChange (ng2-image-viewer.umd.js:186)     at ImageViewerComponent.ngOnChanges (ng2-image-viewer.umd.js:97)

brenoprata10 commented 5 years ago

I'll be releasing a new version tonight that fixes this behaviour.

brenoprata10 commented 5 years ago

Good night, I just released the 3.0.4 version Try again with it please. If you're adding images on ngOnInit, then you can use the normal push, but if you're adding images lazily: Remember to add lazy images like this:

this.images = [...this.images, newImage(Ex: https://picsum.photos/400/700/?random)];

Don't

this.images.push('https://picsum.photos/400/700/?random');
brenoprata10 commented 5 years ago

Please give me your feedback if possible.

Regards.

reberinformatik commented 5 years ago

Hi Breno

Thank you for the update! The update of the [images]-parameter is working.

During testing I encountered the following error, which only occurs occasionally:

ERROR TypeError: Cannot read property 'removeChild' of null at util.js:166 at Array.forEach () at remove (util.js:165) at HTMLImageElement.onHighResImageLoad (ImageViewer.js:777)

I couldn't find the cause. A workaround would be to omit the second (optional) parameter to the iv-viewer in load/show (and not to add the same image in the high resolution parameter). But then styles for .iv-large-image https://github.com/brenoprata10/ng2-image-viewer/blob/a84e25342c11590eae0ac8ad2d77ec44cdafac3a/src/imageviewer.scss#L147 need also be applied for .iv-small-image.

Best regards, Rizja Schmid