React JS FSLightbox Package Images load path Error

user_9140719 0
Viewed 1252

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.

Code Here

Output Error Click able image

reactjs
2 Answers

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.

user_127191230

I faced same problem. My solution was put your image in public/image folder then you can access as <img src={`../image/yourFile.jpg} />

user_193488030
Related