Require(img Path) Not Working/ Cannot Find Module "." Reactjs

Hi I am trying to map a set of images from this.state to image tags, using react.js. I am running into the error: 'cannot find module '.'' Here is the error: Error: Cannot find

Solution 1:

Try moving require statement to your state like this:

this.state = {
  thumbnail_vids: [
    require('../thumbnails/asthma_1.jpeg')
  ]
  ...

Solution 2:

Figured it out, solution: Require images in this.state, not in map function

import React, { Component } from "react";
import { render } from "react-dom";

class Thumbnails extends Component {
    constructor(props){
        super(props);
        this.state = {
            current: 'asthma',
            thumbnail_vids: [require('../thumbnails/asthma_1.jpeg'),require('../thumbnails/asthma_2.jpeg'),require('../thumbnails/asthma_3.jpeg')]
        }
    }
    componentWillReceiveProps(nextProps){
        let current = nextProps.current.topic;
        let thumbnail_vids = [];
        for(let i = 1; i <= 3; i++){
            thumbnail_vids.push(require("../thumbnails/"+current.toLowerCase()+"_"+i+".jpeg"));
            console.log(current);
        }
        this.setState({current,thumbnail_vids,})
    }
    chooseVideo(){

    }
    render(){
        const thumbnailimg = this.state.thumbnail_vids.map((img,i)=>{
            return(<img className="thumbimg" src={img}/>)
        })
        return(
        <div className="vid-and-thumb-holder">
            <div>
                <span className="thumbtable">
                {thumbnailimg}

                </span>
            </div>
        </div>
        )
    }
}

export default Thumbnails;

Solution 3:

The fact that you're getting

Error: Cannot find module "." webpackMissingModule

Means that you're mapping your first string and the first item in the map is the first character in the string: '.'.