（imgパス）が動作していない/モジュールが見つかりません。 " reactjs

Question

こんにちは私はreact.jsを使用してthis.stateからimageタグに画像のセットをマップしようとしています。 「モジュールが見つかりません」というエラーが表示されます。

エラー： エラー：モジュールが見つかりません。 webpackMissingModule のsrc /コンポーネント/ 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(

ここでは、完全なコードです：私は抽象化されているものの

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; 

thumbnails.js、ここでは私のsrcフォルダのためのプロジェクト構造（あります）手元の質問とは関係のないもの：

 ├── 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 

私が作成-反応するアプリ

を使用しています

Answer 1

は、解決策をそれを考え出し： は

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; 

Answer 2

this.stateではなく、マップ機能で画像を必要としますが

Error: Cannot find module "." webpackMissingModule

を取得しているという事実は、あなたが最初にマッピングしていることを意味します文字列の最初の文字は '。'です。