要求（img 路径）不起作用/找不到模块“。” 反应js

Question

您好，我正在尝试使用react.js 将一组图像从 this.state 映射到图像标签。我遇到错误：“找不到模块\'。\'”

\n\n

这是错误：\n 错误：找不到模块“。”\n webpackMissingModule\n src/components/thumbnails.js:26

\n\n

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

\n\n

这是完整的代码：thumbnails.js

\n\n

import React, { Component } from "react";\nimport { render } from "react-dom";\n\nclass Thumbnails extends Component {\n    constructor(props){\n        super(props);\n        this.state = {\n            thumbnail_vids: [\'../thumbnails/asthma_1.jpeg\',\'../thumbnails/asthma_2.jpeg\',\'../thumbnails/asthma_3.jpeg\']\n        }\n    }\n    render(){\n        const thumbnailimg = this.state.thumbnail_vids.map((img,i)=>{\n            let image = require(img);\n            return(<img key={i}  className="thumbimg" src={image}/>)\n        })\n        return(\n            <div>\n                <span className="thumbtable">\n                <img src={require("../thumbnails/asthma_1.jpeg")} />\n                    {thumbnailimg}\n                </span>\n            </div>\n        )\n    }\n}\n\nexport default Thumbnails;\n

\n\n

这是我的 src 文件夹的项目结构（尽管我已经抽象了与当前问题无关的任何内容）：

\n\n

        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.css\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.js\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App.test.js\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 header.js\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 likebutton.js\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 thumbnails.js\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 topicselect.js\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.css\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.js\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 registerServiceWorker.js\n        \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 thumbnails\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 asthma_1.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 asthma_2.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 asthma_3.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 copd_1.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 copd_2.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 copd_3.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 diabetes_1.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 diabetes_2.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 diabetes_3.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 emphysema_1.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 emphysema_2.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 emphysema_3.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 hyperlipidemia_1.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 hyperlipidemia_2.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 hyperlipidemia_3.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 hypertension_1.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 hypertension_2.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 hypertension_3.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 narcolepsy_1.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 narcolepsy_2.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 narcolepsy_3.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 pneumonia_1.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 pneumonia_2.jpeg\n        \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 pneumonia_3.jpeg\n

\n\n

我正在使用 create-react-app

\n

Answer 1

尝试将require语句移至您的状态，如下所示：

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

Answer 2

想通了，解决方案：需要 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;