reactjs - 要求图像在 ReactJS 中不起作用，但导入可以

Question

所以，我想从我的本地计算机获取一个图像到我的 ReactJS 应用程序中。所以，询问这个：如何在 React 中引用本地图像？，我做了这个代码：

import Header from './components/Header'

function App() {
  return (
    <div className="container">
      <Header />
      <img src={"./resources/faces/face_1.jpg"} alt="A face" />
    </div>
  );
}

export default App;

它不起作用，所以这样做：

import Header from './components/Header'

function App() {
  return (
    <div className="container">
      <Header />
      <img src={require("./resources/faces/face_1.jpg")} alt="A face" />
    </div>
  );
}

export default App;

我搜索了可能是什么原因，例如这些链接：

不工作：需要（'反应/插件'）

和其他人喜欢它，这不适用于我，因为我正在使用 jpg 文件。

后来，我尝试导入而不是要求，所以：

import Header from './components/Header'
import g from "./resources/faces/face_1.jpg"

function App() {
  return (
    <div className="container">
      <Header />
      <img src={g} alt="A face" />
    </div>
  );
}

export default App;

它有效！但是，这并不理想，因为我计划处理多个图像。我只是不明白为什么导入有效而要求无效。因此问题是：为什么在 ReactJS 中 require 关键字不起作用，但导入却起作用？

提前致谢。

标签： reactjs