Реагируйте: загрузка изображения на основе динамического пути приводит к ошибке

Question

Я пытаюсь загрузить изображения на основе динамического пути в реакции, но в результате получается следующая ошибка Cannot find module <path>

Следующий код работает

const TestImage = () => {
  return (
    <div className="image-wrapper">
      <img src={require('./../../../assets/images/guy-holding-pencil.jpg')} />
    </div>
  );
};

Я сломалсядинамическая часть с использованием переменной, которая не работает

const TestImage = () => {
  const image = './../../../assets/images/guy-holding-pencil.jpg';

  return (
    <div className="image-wrapper">
      <img src={require(`${image}`)} />
    </div>
  );
};

Путь правильный.Единственная разница - переменная.Результат:

Error: Cannot find module './../../../assets/images/guy-holding-pencil.jpg'.

Редактировать: Мой проект создан с create-react-app

Answer 1

В некоторых случаях вы можете использовать команду require, поскольку существует разница между относительным и абсолютным путями.Я пытаюсь зайти в npmj org и найти плагин dropzone для решения этой проблемы

Answer 2

Как насчет этого подхода?

import IMAGE1 from './../../../assets/images/guy-holding-pencil.jpg';

Тогда

const TestImage = () => {


return (
<div className="image-wrapper">
  <img src={IMAGE1} />
</div>
);
};