reactjs - React：根据动态路径加载图像会导致错误

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

标签： reactjsimagerequire

Answer 1

How about this approach ?

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

Then

const TestImage = () => {


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