Question

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

如果不是，是否标准使用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内插字符串不允许传入的参数，但是对于此示例，有一种变通方法，如Wes Bos发布的link所示。简而言之，解决方法是使用graphql查询返回每个图像，然后使用诸如map之类的东西来挑出感兴趣的图像。使用此变通办法，我设法在您的帖子中创建了示例的通用版本，并在其中传递了所关注图像的名称。不过，很明显，如果您的站点中有数百个图像，则不理想。

您可以将参数传递给针对“页面组件”的graphql查询。 Gatbsy教程（https://www.gatsbyjs.org/tutorial/）很棒，我无法强调整个教程的价值。第四部分和第五部分讨论了graphql以及如何处理查询和图像。

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

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

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

gatsby-starter-default启动程序中的Image组件的作用是什么？

1 个答案: