gatsby - gatsby-starter-default starter中Image组件的作用是什么？

Question

我不知道 components 文件夹中的 image.js 文件是否应该接受参数，指定诸如流体与固定、图像大小、应该渲染哪个图像等，然后根据参数渲染任何图像。

如果没有，是否标准使用 image.js 为要显示的每个图像基于 image.js 创建一个新文件？如果是这样，这样做有什么好处？

我阅读了有关 image.js 的内容，但我仍然不明白这个问题。

image.js 组件:https://github.com/gatsbyjs/gatsby-starter-default/blob/master/src/components/image.js

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

/*
 * This component is built using `gatsby-image` to automatically serve optimized
 * images with lazy loading and reduced file sizes. The image is loaded using a
 * `StaticQuery`, which allows us to load the image from directly within this
 * component, rather than having to pass the image data down from pages.
 *
 * For more information, see the docs:
 * - `gatsby-image`: https://gatsby.dev/gatsby-image
 * - `StaticQuery`: https://gatsby.dev/staticquery
 */

const Image = () => (
  <StaticQuery
    query={graphql`
      query {
        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
)
export default Image

Answer 1

这里发生了一些事情。

首先，这只是一个带有静态查询的组件的例子。它只是显示了一个示例 graphql 查询来拉入图像并呈现图像数据。您可能会从父组件调用它。

您可以为每个图像创建这样的组件，但您不必这样做。

使用上面的例子，你不能传入参数。我最近尝试过，但 graphql 内插字符串不允许传入参数，但对于此示例，有一个解决方法，如 link 所示由韦斯博斯发布。简而言之，解决方法是使用 graphql 查询返回每个图像，然后使用诸如 map 之类的东西来梳理出感兴趣的图像。使用此解决方法，我设法在您的帖子中创建了该示例的通用版本，其中我传入了感兴趣的图像的名称。但是，如果您的网站中有数百张图片，显然这并不理想。

您可以将参数传递到“页面组件”的 graphql 查询中。 Gatbsy 教程 ( https://www.gatsbyjs.org/tutorial/ ) 非常出色，我再怎么强调都不会过分阅读整个教程的值(value)。第 4 部分和第 5 部分讨论了 graphql 以及处理查询和图像。

处理图像时，建议的方法是使用 gatsby-image ( https://www.gatsbyjs.org/packages/gatsby-image/ )，该示例使用了该方法。

我还创建了另一个通用图像组件，它接受图像数据，而不是图像名称，作为 Prop 。在父页面组件中，我可以定义一个常量 graphql 查询，然后将其结果传递到我的图像组件中。这种方法可以扩展到作为图片库的页面组件。例如。查询可以返回文件夹中的所有图像或匹配正则表达式。可以通过传入图像数据来迭代查询请求，为每个图像创建一个图像组件。

我故意不包含代码示例，因为链接包含我上面描述的所有示例。