Javascript Require（img路径）不工作/找不到模块&引用；反应

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

以下是错误： 错误：找不到模块“” 网页包丢失模块 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(

我正在使用create react应用程序

解决方案： 需要此状态的图像，而不是映射函数中的图像

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;

import React，{Component}来自“React”；
从“react dom”导入{render}；
类缩略图扩展组件{
建造师（道具）{
超级（道具）；
此.state={
时事:"哮喘",，
缩略图视频：[require（'../thumbnails/thumbnails\u 1.jpeg'）、require（'../thumbnails/thumbnails\u 2.jpeg'）、require（'../thumbnails/thumbnails\u 3.jpeg'）]
}
}
组件将接收道具（下一步）{
让current=nextrops.current.topic；
让缩略图_vids=[]；
for（设i=1；i{
返回（）
})
返回(
{thumbnailimg}
)
}
}
导出默认缩略图；

你得到

错误：找不到模块“.”WebPackageMissingModule

表示您正在映射第一个字符串，映射中的第一项是字符串中的第一个字符：“.”。

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

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

---

哇！你已经解决了我道具的进口问题。非常感谢。很高兴看到这样的评论！

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;

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