[英]Require(img path) not working/ cannot find module “.” reactjs
Hi I am trying to map a set of images from this.state to image tags, using react.js. 您好我正在尝试使用react.js将一组图像从this.state映射到图像标签。 I am running into the error: "cannot find module '.'"
我遇到了错误:“找不到模块'。'”
Here is the error: Error: Cannot find module "." 这是错误:错误:找不到模块“。” webpackMissingModule src/components/thumbnails.js:26
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(
Here is the full code: thumbnails.js 这是完整的代码: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;
and here is the project structure for my src folder (though I have abstracted anything unrelated to the question at hand): 这是我的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
I am using create-react-app 我正在使用create-react-app
Figured it out, solution: Require images in this.state, not in map function 弄清楚,解决方案:需要在this.state中的图像,而不是在map函数中
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;
The fact that you're getting 你得到的事实
Error: Cannot find module "."
错误:找不到模块“。” webpackMissingModule
webpackMissingModule
Means that you're mapping your first string and the first item in the map is the first character in the string: '.'. 意味着您要映射第一个字符串和地图中的第一个项目是字符串中的第一个字符:'。'。
Try moving require statement to your state like this: 尝试将require语句移动到您的状态,如下所示:
this.state = {
thumbnail_vids: [
require('../thumbnails/asthma_1.jpeg')
]
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.