Images won't display in React Image Slider

Issue

I'm trying to see what I'm doing wrong here for calling my images. I have the slider set up and working up the images won't display for the slides.

Using React Slideshow Image. Anyone recommend any slider libraries that are full screen for a background images on a homepage?

Here is my code:

import React from 'react'
import { Fade } from 'react-slideshow-image'
import * as styles from '../styles/slider.module.css'
import 'react-slideshow-image/dist/styles.css'

const fadeImages = [
  'src/images/constructionconcrete.jpg',
  'src/images/constructionbuilding.jpg',
  'src/images/constructiondusk.jpg'
];

const ImageSlider = () => {
  return (
    <div className={styles.imageContainer}>
      <Fade>
        <div className={styles.eachFade}>
          <div>
            <img src={fadeImages[0]} />
          </div>
          <p>First Image</p>
        </div>
        <div className={styles.eachFade}>
          <p>Second Image</p>
          <div>
            <img src={fadeImages[1]} />
          </div>
        </div>
        <div className={styles.eachFade}>
          <div>
            <img src={fadeImages[2]} />
          </div>
          <p>Third Image</p>
        </div>
      </Fade>
    </div>
  );
};

export default ImageSlider;

Any help would be appreciated!

Thanks!

Solution

I can guess the image URLs are not relative to this file's location. Try using a relative URL, for example if it's located two folders up then it would be ../../images/whatever

If it's not that, another idea might be the divs or other elements don't have visible dimensions, so try tinkering with their width and height

Answered By - Ron B.