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

Posted 2023-02-22

【中文标题】如何在 GatsbyJS 项目中显示图像？

【英文标题】：How to show images in a GatsbyJS project?

【发布时间】：2019-11-19 03:58:02

【问题描述】：

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

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

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

【问题讨论】：

官方文档gatsbyjs.org/docs/working-with-images

【参考方案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  />


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'  />;

---

Corey's answer 引用了 Gatsby 文档的 "Add custom webpack config" 部分，这很有用，但不需要加载图像。

【讨论】：

在您为使用静态文件夹而链接的页面上，Gatsby 对这种用法提出了警告。 “使用 Gatsby 时，我们建议直接在 javascript 文件中导入资产，因为它提供的好处……”。我会通过提供这样的示例来避免建议初学者开始滥用它。 gatsbyjs.org/docs/static-folder/#when-to-use-the-static-folder

@coreyward 它甚至在我引用的 cmets 中，推荐的方式也在我的回答中。我不认为它可以更清楚。

@coreyward 我交换了它们，所以任何人看到的第一件事就是正确的方法。

【参考方案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") ,
    ,
  )

这做了两件事：

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

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

import logo from "images/logo.png"

export const Header => 
  <header>
    <img src=logo  />
  </header>

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

【讨论】：

为避免歧义或混淆导入，最好为src 目录（例如@/）设置别名，而不是将其设为默认导入根目录。

@EmileBergeron 来源？

@EmileBergeron 甚至还有Gatsby plugin that does this。

不同的工具可能无法正确加载文件，或者可能会混淆（加载了哪个文件），例如 sass 处理器、Jest 和/或故事书。在 babel 中做别名会更好，因为它与大多数工具共享，而它们每个都有自己的 webpack 配置。无论源目录是什么，这也是使用@/ 的通用标准。

盖茨比编排 Sass。我在.storybook/webpack.config.js 中使用 Storybook 做同样的事情。 babel-plugin-module-resolver 将 ./src 设置为示例中别名的根（无别名 src）。 babel-plugin-root-import 建议不要使用 @。好像也是create a lot of confusion。