Проблемы с путями в React JS

Question

У меня проблема с получением файлов для правильной загрузки в Node JS в зависимости от того, как хранится путь.

{
  Object.entries(LEGEND).map(([key, value]) => {
    return (
      <div key={"layout-editor-element-" + key}>
        <Card
          className="text-center"
          align="center"
          tag="a"
          title={value.desc}
          onClick={() => this.generateItem(key)}
        >
          <Card.Body>
            <Card.Img
              variant="top"
              src={require(`../assets/icons/simpleText-Icon.png`)}
              className="card-images"
            />
            <Card.Text>{value.title}</Card.Text>
          </Card.Body>
        </Card>
      </div>
    );
  });
}

Работает нормально, но меняется на

<Card.Img variant="top" src={require (value.iconName)} 

Получает консольную ошибку

Uncaught Error: Не удается найти модуль '../assets/icons/simpleText-Icon.png'

Другие значения в загрузке карты в порядке, и даже когда я объявляю что-то вроде

const pathname = "../assets/icons/simpleText-Icon.png"

и затем использую

<Card.Img variant="top" src={require(pathname)} className="card-images"/> 

, я получаю ту же ошибку.

Это та же строка пути, но что-то явно меняется, когда вы пытаетесь подставить константы, хотя я озадачен тем, что это может быть.

Есть кто-нибудь с идеей, или каким-нибудь обходным / альтернативным способом, которым я могу заставить его загружать изображения выборочно на основе карты?

Answer 1

Упаковщик не может обрабатывать динамические c требования.

Что вы можете сделать, чтобы это исправить, вместо того, чтобы хранить строку ../assets/icons/simpleText-Icon.png внутри value.iconName, вы можете сохранить полное выражение запроса в качестве значения ключа:

iconName: require('../assets/icons/simpleText-Icon.png')