要求（IMG路徑）不工作/無法找到模塊「。」 reactjs

Question

嗨我試圖從this.state映射到一組圖像標籤，使用react.js。 「

這是錯誤： 錯誤：無法找到模塊」。「 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(

下面是完整的代碼：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; 

，這裏是我的src文件夾中的項目結構（雖然我已經抽象任何無關手頭上的問題）：我使用CREATE-反應，應用

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

想通了，解決方法： 要求圖像this.state，而不是在地圖功能

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

你得到

Error: Cannot find module "." webpackMissingModule

意味着你映射你的第一個事實字符串，並且地圖中的第一項是字符串中的第一個字符：'。'。