backgroundImage carousel: Why wont my react.js array of local images render?

Question

I'm adding an image carousel to my website. The div that is linked to carousel.js is totally blank. It seems that the images are not rendering. My images are local and stored in an array in carousel.js. I've gone through similar threads but haven't been able to get the images to render. For example, I've made the image size smaller, tried importing the images at the top of carousel.js, moved the images folder to the public folder generated by node module, and about ten other things. This is my first react project so any help would be appreciated.

The full project can be viewed on cloud 9 here

Here's my carousel.js:

import React from 'react';
import ReactDOM from 'react-dom';


const imgUrls = [
  "./images/croissant.jpg",
  "./images/herbal-tea.jpg",
  "./images/matcha-latte.jpg",
  "./images/mochaLatte.jpg",
  "./images/waffle.jpg"
  ];

class Carousel extends React.Component {
    constructor (props) {
        super(props);

        this.state = {
            currentImageIndex: 0
        };

        this.nextSlide = this.nextSlide.bind(this);
        this.previousSlide = this.previousSlide.bind(this);
    }

    previousSlide () {
        const lastIndex = imgUrls.length - 1;
        const { currentImageIndex } = this.state;
        const shouldResetIndex = currentImageIndex === 0;
        const index =  shouldResetIndex ? lastIndex : currentImageIndex - 1;

        this.setState({
            currentImageIndex: index
        });
    }

    nextSlide () {
        const lastIndex = imgUrls.length - 1;
        const { currentImageIndex } = this.state;
        const shouldResetIndex = currentImageIndex === lastIndex;
        const index =  shouldResetIndex ? 0 : currentImageIndex + 1;

        this.setState({
            currentImageIndex: index
        });
    }

    render () {
        return (
            <div className="carousel">
                <Arrow direction="left" clickFunction={ this.previousSlide } glyph="&#9664;" />
                <ImageSlide url={ imgUrls[this.state.currentImageIndex] } />
                <Arrow direction="right" clickFunction={ this.nextSlide } glyph="&#9654;" />
            </div>
        );
    }
}

const Arrow = ({ direction, clickFunction, glyph }) => (
    <div 
        className={ `slide-arrow ${direction}` } 
        onClick={ clickFunction }>
        { glyph } 
    </div>
);

const ImageSlide = ({ url }) => {
    const styles = {
        backgroundImage: `url(${url})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center'
    };

    return (
        <div className="image-slide" style={styles}></div>
    );
}

ReactDOM.render(
  <Carousel />,
  document.getElementById('container')
);

Answer 1

If you are using webpack you need to use require('./imagedirectory')

So it is like this...

const imgUrls = [ require("./images/croissant.jpg") , require("./images/herbal-tea.jpg") , require("./images/matcha-latte.jpg") , require("./images/mochaLatte.jpg") , require("./images/waffle.jpg") ];

Answer 2

What about this :

const ImageSlide = ({ url }) => {

    const img = require(`${url}`);

    const styles = {
        backgroundImage: `url(${img})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center'
    };

    return (
        <div className="image-slide" style={styles}></div>
    );
}