Require(img path) not working/ cannot find module "." reactjs

Question

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 module "." webpackMissingModule src/components/thumbnails.js:26

 23 | }
  24 | render(){
  25 |  const thumbnailimg = this.state.thumbnail_vids.map((img,i)=>{
> 26 |      let image = require(img);
  27 |      return(<img key={i}  className="thumbimg" src={image}/>)
  28 |     })
  29 |  return(

Here is the full code: thumbnails.js

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

class Thumbnails extends Component {
    constructor(props){
        super(props);
        this.state = {
            thumbnail_vids: ['../thumbnails/asthma_1.jpeg','../thumbnails/asthma_2.jpeg','../thumbnails/asthma_3.jpeg']
        }
    }
    render(){
        const thumbnailimg = this.state.thumbnail_vids.map((img,i)=>{
            let image = require(img);
            return(<img key={i}  className="thumbimg" src={image}/>)
        })
        return(
            <div>
                <span className="thumbtable">
                <img src={require("../thumbnails/asthma_1.jpeg")} />
                    {thumbnailimg}
                </span>
            </div>
        )
    }
}

export default Thumbnails;

and here is the project structure for my src folder (though I have abstracted anything unrelated to the question at hand):

        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── components
        │   ├── header.js
        │   ├── likebutton.js
        │   ├── thumbnails.js
        │   └── topicselect.js
        ├── index.css
        ├── index.js
        ├── registerServiceWorker.js
        ├── thumbnails
        │   ├── asthma_1.jpeg
        │   ├── asthma_2.jpeg
        │   ├── asthma_3.jpeg
        │   ├── copd_1.jpeg
        │   ├── copd_2.jpeg
        │   ├── copd_3.jpeg
        │   ├── diabetes_1.jpeg
        │   ├── diabetes_2.jpeg
        │   ├── diabetes_3.jpeg
        │   ├── emphysema_1.jpeg
        │   ├── emphysema_2.jpeg
        │   ├── emphysema_3.jpeg
        │   ├── hyperlipidemia_1.jpeg
        │   ├── hyperlipidemia_2.jpeg
        │   ├── hyperlipidemia_3.jpeg
        │   ├── hypertension_1.jpeg
        │   ├── hypertension_2.jpeg
        │   ├── hypertension_3.jpeg
        │   ├── narcolepsy_1.jpeg
        │   ├── narcolepsy_2.jpeg
        │   ├── narcolepsy_3.jpeg
        │   ├── pneumonia_1.jpeg
        │   ├── pneumonia_2.jpeg
        │   └── pneumonia_3.jpeg

I am using create-react-app

score 7 · Answer 1 · answered Oct 21 '18 at 16:38

7

Try moving require statement to your state like this:

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

answered Oct 21 '18 at 16:38

Sebastián Lara

5,355
2
28
21

1

Wow! You have resolved the import problem of my props. Thank you!!!! – neoswf Apr 20 '20 at 23:56
Nice to see this kind of comments! – Sebastián Lara May 14 '20 at 14:53

score 1 · Answer 2 · answered Aug 17 '17 at 14:15

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;

score 0 · Answer 3 · answered Aug 17 '17 at 14:17

0

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: '.'.

answered Aug 17 '17 at 14:17

shy alon

188
1
8

Require(img path) not working/ cannot find module "." reactjs

3 Answers3

Linked