Почему img path работает, а не path.join?

Question

Используя React 16.13.1, у меня есть следующий класс:

import React from "react";
const path = require('path');
class Portrait extends React.Component {
  render() {
    const vikingName = this.props.name.toLowerCase();  // Expected output of "ulf"
    return (
      <div>
        // below img tags go here
      </div>
    )
  }
}
export default Portrait

Я пытаюсь, чтобы src реквизит тегов img был динамическим c, поэтому, когда родительский компонент вызывает его, он передает имя викинга. Каталог файлов находится в пространстве имен.

Это работает:

<img src={require('../../../../res/img/ulf/picture.png') />

Ошибка: "Модуль не найден в" ../../../../res/img/ ulf / picture.png '

<img src={require(path.join('../../../../res/img', vikingName, 'picture.png'))} />

Ошибка: "Модуль не найден в" ../../../../res/img/ulf/picture.png'

<img src={require(`../../../../res/img/${vikingName}/picture.png`)} />

---

Когда this.props загружается правильно, (this.props.name дает ожидаемый результат), и все типы - String и , печатают правильный, тот же путь, почему два нижних не работают

Answer 1

Проблема не в самом вашем коде. Эта проблема немного глубже в том, как Webpack связывает ваш код.

Webpack связывает ваш код и ресурсы и создает совершенно новую структуру папок и / или имен файлов.

Webpack изменит структуру папок, как это:

src
 - app.jsx
 - components
 - - MyComponent.jsx
 - assets
 - - image.jpg

в:

dist
- main.js
- image.jpg

Весь смысл импорта / экспорта заключается в том, что они имеют статус c. Webpack изменит все ваши пути за кулисами, чтобы они указывали на вновь созданный связанный путь во время процесса объединения. Вот почему ваш первый пример работает гладко. Этот путь был определен до выполнения, поэтому до того, как веб-пакет объединит ваш код.

Однако ...

Динамический c импорт, который обновляется во время выполнения, к пути, который не существует в вашем комплекте кода. Вот почему он выдает ошибку, что не может найти ваш файл. Потому что в этом месте в вашем комплекте кода такого файла просто нет.

К счастью, для этой проблемы существует обходное решение

---

Как решить эту проблему:

Это можно получить доступ к пути файлов относительно вашего пакета, используя require.context. Это позволяет вам анализировать ваш относительный путь к объединенному пути и динамически обновлять ваши изображения.

Этот ответ должен быть в состоянии указать вам путь.