V
V
Viktor2020-05-04 22:41:35
React
Viktor, 2020-05-04 22:41:35

Why are links not working in fslightbox-react?

I am using the fslightbox-react library

import React, { useState, useEffect } from 'react';
import FsLightbox from 'fslightbox-react';
import oneImage from '../../images/one.jpg'
import twoImage from '../../images/two.jpg'
import threeImage from '../../images/three.jpg'
import './style.css'

const ImageFancy = () => {
  
 
  const [lightboxController, setLightboxController] = useState({
    toggler: false,
    slide: 1
  });
    
    function openLightboxOnSlide(number) {
      setLightboxController({
        toggler: !lightboxController.toggler,
        slide: number
      });
    }

    let imgArr = ['https://i.imgur.com/fsyrScY.jpg', oneImage, twoImage, threeImage];

    return (
      <>
        <div className='vp_zoom'>
          {
            imgArr.map((elem, ind) => {
              let num = ind + 1
              return (
                <img 
                  key={ind} 
                  src={elem} 
                  onClick={() => openLightboxOnSlide(num)} 
                  alt="" 
                />
              )
            })
          }
        </div>
    
        <FsLightbox
          toggler={ lightboxController.toggler }
          sources={ imgArr }
          slide={ lightboxController.slide }
        />
      </>
    );
}
export default ImageFancy


The problem is that the ' https://i.imgur.com/fsyrScY.jpg ' format link works and the oneImage link no longer shows Invalid source. I don't understand what is the reason.

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question