如何显示图像？下面无法正确显示。

In the src/components/Header.js file:

<img src="../images/logo.png" style={{width:"112",height:"28"}} />

将资源直接导入到文件中

import React from "react"
import logo from "./logo.png" // Tell Webpack this JS file uses this image

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

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

export default Header

这是最好的原因是它可以通过 Webpack 捆绑管道进行优化，例如压缩、数据 URL、缓存清除文件名哈希等。

使用静态文件夹

这对于图像以外的文件最有用。

您可以创建一个名为的文件夹static在你的项目的根部。 您放入该文件夹中的每个文件都将被复制到public文件夹。例如。如果您添加一个名为sun.jpg to the static文件夹， 它将被复制到public/sun.jpg

您可以在代码中引用静态文件夹中的资源，而无需 有什么特殊要求：

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in the “Importing Assets Directly Into Files” page.
  return <img src={'logo.png'} alt="Logo" />;
}

科里的回答引用了“添加自定义 webpack 配置”Gatsby 文档的部分，很有用，但是无需加载图像。