React JS FSLightbox Package Images load path Error

Question

i am using FSLightbox Package to show image gallery in carousel but when i click on image it show me the message of invalid source. it is only show images and videos given as a URL but not from my own path.Already use {in1} but its not working. Anyone have idea of how to set path of image. Check the attached image. Note: Can you suggest me any other package to show images gallery as carousel.

Answer 1

This can be caused when FsLightbox cannot check the type of the source automatically due to CORS Policy.

If you can enable CORS in the sources, this will be fixed.

If you cannot enable CORS, you can set the types of each source manually by passing a "type" or "types" attribute to the lightbox.

Available types:

1. image
2. video
3. youtube

Example code

<FsLightbox
   toggler={lightboxController.toggler}
   slide={lightboxController.slide}
   sources={[...photos, ...videos]}
   types={
     [
       ...new Array(photos.length).fill('image'),
       ...new Array(videos.length).fill('youtube')
     ]
   }
   key={lightboxController.key}
/>

The key props is used if you need to fetch the images of an API, because FsLightBox React is only made for static links, so you have to update the key everytime you fetch images/videos for the component to rerender.