Question

我正在尝试从React组件状态下给定的路径加载图像。使用由create-react-app创建的应用。出现以下错误：

找不到模块'../ assets / images / img-2.jpg'

已经检查图像在路径上。同样，只有在安装了react-router-dom并设置了路由之后，这种情况才会发生。

import React, {Component} from 'react';
import { Carousel,Image } from 'react-bootstrap';


class JumboBanner extends Component {
constructor(props, context) {
    super(props, context);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      index: 0,
      direction: null,
      images : [
        {path:'../assets/images/img-1.jpg', body:{title:'This is title',text:'Kutchi Text'}},
        {path:'../assets/images/img-2.jpg', body:{title:'This is title',text:'Kutchi Text'}},

      ]
    };
  }

  handleSelect(selectedIndex, e) {
    this.setState({
      index: selectedIndex,
      direction: e.direction,
    });
  }

  render() {
    const { index, direction,images } = this.state;

    const corouselItems = images.map(img=> (<Carousel.Item>
        <Image className="d-block w-100" src={require(`${img.path}`)}/>
        {/* <img
          className="d-block w-100"
          src={require(`${img.path}`)}
          alt="First slide"
        /> */}


      </Carousel.Item>) );
    return (
      <Carousel
        activeIndex={index}
        direction={direction}
        onSelect={this.handleSelect}>
        {corouselItems}

      </Carousel>
    );
  }
}
export default JumboBanner;
-testapp
|-public
|-src
|--assets
|-|-images

Answer 1

使用导入来加载图像会解决您的问题。

import imgOne from '../assets/images/img-1.jpg'; 

<img src={imgOne}/>

Answer 2

问题已解决。这是因为我对src文件夹中的每个文件夹都有一个index.js文件。 webpack的默认路径解析器和react-create-app构造一个数组相对路径，并在此过程中搜索cwd中的index.js文件，如果找到一个，它将所有相对路径映射到该目录或其直接父目录。因此，.. /或./将针对当前工作目录中的路径进行映射。我将资产文件夹移到了cwd中，问题解决了。尽管这只是一种解决方法，但我认为这与浪费时间试图找出webpack的内部信息或react-create-app样板代码是更好的平衡。

谢谢大家的帮助。

使用require（）从相对路径加载图像时找不到模块

2 个答案: