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

Question

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

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

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

Answer 1

Importing Assets Directly Into Files

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、缓存破坏文件名哈希等。

Using the Static folder

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

您可以在项目的根目录下创建一个名为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's answer 引用了 Gatsby 文档的 "Add custom webpack config" 部分，这很有用，但不需要加载图像。

Answer 2

如果您还没有一个gatsby-node.js 文件，请在您的项目的根目录下创建一个文件并添加：

const path = require("path")

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, "src"), "node_modules"],
      alias: { react: path.resolve("./node_modules/react") },
    },
  })
}

这做了两件事：

1. 它将使 src 成为您导入的基础
2. 它将确保您不会因为加载多个 React 版本而遇到奇怪的错误（需要引用 React 的插件可能会导致这种情况）。

在您的 Header.js 文件中，您现在可以这样做：

import logo from "images/logo.png"

export const Header => 
  <header>
    <img src={logo} alt="Logo Alt Text" />
  </header>

根据您的徽标文件大小，此渲染结果实际上会有所不同。如果它足够小，Gatsby 将使用 base64 内联它，从而减少加载页面所需的 HTTP 请求数。如果它更大，它将被赋予资产指纹并在您的网站构建时添加到可用资产中，并且文件的 URL 将用于src 属性（例如/images/logo-123asd.png）。这将允许您使用 HTTP 缓存标头，告诉浏览器长时间缓存此文件是安全的；如果它发生变化，URL 也会发生变化，您无需担心缓存版本无效。