How do I use the lightbox using my own images

Hello,

You can import your photos into your js file which contains LigthBox component:

 import image from './images/image.jpg'

Then declare images array in the state:

images: [
    image,
    ....
   ]

Then you can use the code snippet from our examples:

import React, { Component } from "react";
import { MDBContainer, MDBRow, MDBCol } from "mdbreact";
import Lightbox from "react-image-lightbox";
import "./Lightbox.css";

//Importing your images
import image from "./images/image.jpg"
import image2 from "./images/image2.jpg"
//...

class LightboxPage extends Component {

  state = {
    photoIndex: 0,
    isOpen: false,
     images: [
       image,
       image2,
        //...
    ]
  }

  renderImages = () => {
    let photoIndex = -1;
    const { images } = this.state;

    return images.map(imageSrc => {
      photoIndex++;
      const privateKey = photoIndex;
      return (
      <MDBCol md="4" key={photoIndex}>
        <figure>
          <img
            src={imageSrc}
            alt="Gallery"
            className="img-fluid"
            onClick={() =>
              this.setState({ photoIndex: privateKey, isOpen: true })
            }
          />
        </figure>
      </MDBCol>
      );
    })

  }

  render() {
    const { photoIndex, isOpen, images } = this.state;
    return (
        <MDBContainer className="mt-5">
          <div className="mdb-lightbox no-margin">
            <MDBRow>
              {this.renderImages()}
            </MDBRow>
          </div>
          {isOpen && (
            <Lightbox
              mainSrc={images[photoIndex]}
              nextSrc={images[(photoIndex + 1) % images.length]}
              prevSrc={images[(photoIndex + images.length - 1) % images.length]}
              imageTitle={photoIndex + 1 + "/" + images.length}
              onCloseRequest={() => this.setState({ isOpen: false })}
              onMovePrevRequest={() =>
                this.setState({
                  photoIndex: (photoIndex + images.length - 1) % images.length
                })
              }
              onMoveNextRequest={() =>
                this.setState({
                  photoIndex: (photoIndex + 1) % images.length
                })
              }
            />
          )}
        </MDBContainer>
    );
  }
}

export default LightboxPage;

If something doesn't work please contact me again.

Best regards.

import logo from './logo.png';

<img src={logo} alt="logo" />

// Assuming logo.png is in public/ folder of your project
<img src={process.env.PUBLIC_URL + 'https://mdbcdn.b-cdn.net/logo.png'} alt="logo" />