не могу найти модуль при загрузке изображения с относительного пути с помощью require ()

Question

Я пытаюсь загрузить изображение с пути, указанного в состоянии реагирующего компонента.Использование приложения, созданного create-реагировать-приложение.ошибка ниже:

Не удается найти модуль '../assets/images/img-2.jpg'

Уже проверено, что изображение существует в пути.Также это произошло только после установки response-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

Проблема была решена.Это было потому, что у меня был файл index.js для каждой папки внутри папки src.Преобразователь путей по умолчанию для webpack и реагирует на создание-приложения создает массив относительных путей, и при этом он ищет файл index.js в cwd, если он его находит, он сопоставляет все относительные пути с этим каталогом или его непосредственным родителем.Таким образом, ../ или ./ будут сопоставлены с путем в текущем рабочем каталоге.Я переместил папку активов в cwd, и проблема была решена.Хотя это всего лишь обходной путь, я считаю, что это лучший компромисс с тратой времени на попытки выяснить внутреннюю часть кода веб-пакета или пакета реакции-создания-приложения.

Спасибо всем за помощь.

Answer 2

Используйте импорт для загрузки изображений, это решит вашу проблему.

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

<img src={imgOne}/>