Gatsby graphql 查询 GatsbyImage 使用项目中的本地图像

Question

我只想使用 GatsbyImage 组件的图像。

通常您使用 <img src='./img.jpg'/> 来完成。 GatsbyImage 是如何完成的，所以我可以使用 props 发送图像。

Answer 1

如果你想使用 GatsbyImage，你需要提供额外的 GraphQL 节点数据，Gatsby 使用它的转换器和锐器推断这些数据。为此，您需要通过在 gatsby-config.js:

中设置以下代码段来告诉 Gatsby 这些图像的位置。

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `componentImages`,
    path: `${__dirname}/src/components`,
  },
},

注意：您可以有多个 gatsby-source-filesystem

的实例

再次启动 gatsby develop 以刷新源后，您将在 GrahiQL 游乐场 (localhost:8000/___graphql) 中看到可用的节点，您应该在其中测试您的查询，但它应该如下所示：

  image: file(relativePath: {eq: "free-time.jpg"}) {
    childImageSharp {
      gatsbyImageData
    }
  }

已在您的 CodeSandbox 中测试并正常工作。

Answer 2

在npm init gatsby之后，'src/images'文件夹被创建，这是基本的根相对路径，默认设置在gatsby.config.js ]

{
         resolve: 'gatsby-source-filesystem',
         options: {
            name: 'images',
            path: `./src/images/`,
         }
}

所以把你的img.jpg放到images文件夹，然后用相对路径查询

   const data = useStaticQuery(graphql`
  {
     file(relativePath: { eq: "free-time.jpg" }) {
        childImageSharp {
           gatsbyImageData
        }
     }
  }
`);

并将其插入到 GatsbyImage

 const img = getImage(data.file);

 <GatsbyImage image={img} />

Gatsby graphql 查询 GatsbyImage 使用项目中的本地图像

Gatsby graphql query for GatsbyImage to use a local image from project

reactjs

graphql

gatsby

gatsby-image