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

2024-01-20

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

这是错误: 错误:找不到模块“。” webpack缺少模块 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')
  ]
  ...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

要求(img 路径)不起作用/找不到模块“。”反应js 的相关文章