您好,我正在尝试使用 react.js 将一组图像从 this.state 映射到图像标签。我遇到了错误:“找不到模块‘.’”
这里是错误: 错误:找不到模块“。” 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(
完整代码如下: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 文件夹的项目结构(尽管我已经抽象了与手头问题无关的任何内容):
├── 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
我正在使用 create-react-app
最佳答案
尝试将 require 语句移动到您的状态,如下所示:
this.state = {
thumbnail_vids: [
require('../thumbnails/asthma_1.jpeg')
]
...
关于javascript - 要求(img 路径)不工作/找不到模块 "."reactjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45737137/