Javascript 在react组件中渲染图像

我在从“./src/img”文件渲染图像时遇到问题，不知道哪里出了问题

我有一个对象，它有一个键“image”，返回文件名（即：“filename.jpg”）。如前所述，图像存储在'src'文件夹中的'img'文件夹中

在我的组件中，我返回如下图像：

<div className='image'>
    <img src={require(`../img/${details.image}`)} alt={details.name} />
    {
        console.log(details.image)
    }
  </div>

{
console.log（details.image）
}

我使用了我应该使用的require函数（我想是？！^^），并用

$（details.image）

指示文件夹并检索图像名称。 正如您所看到的，我正在做一个console.log的详细信息图像，它会毫无疑问地返回文件名

当我进入控制台并检查渲染时，alt没有问题，但是src参数给了我

[object Module]

这就是我对那里发生的事情和我做错的事情感到困惑的地方

---

感谢advance

代替require模块，尝试按照docs的建议导入图像

从“/logo.jpeg”导入徽标

从“React”导入React；
从“./logo.png”导入徽标；//不需要require，只需在字符串中添加图像的路径即可。确保你在公共路径中有img文件夹。所以我按照你说的做了，它工作正常。我试着做一个构建只是为了检查，没有问题。非常感谢你！（现在呈现如下：非常感谢，虽然我使用了前面的答案，但你的答案非常符合逻辑。我可能不得不使用状态，我想，但我可以事先想到它。）^^
import React from 'react';
import logo from './logo.png'; // <<<< image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;   // <<<<<< Adding to src attribute.
}

export default Header;