reactjs - 如何在 GatsbyJS 项目中显示图像？

Question

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

在src/components/Header.js文件中：

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

标签： reactjsgatsby

Answer 1

将资产直接导入文件

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的文件添加到文件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" />;
}

---

Corey 的回答引用了Gatsby 文档的“添加自定义 webpack 配置”部分，这对加载图像很有用但没有必要。