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

【问题标题】：Gatsby graphql query for GatsbyImage to use a local image from projectGatsby graphql 查询 GatsbyImage 以使用项目中的本地图像
【发布时间】：2022-01-23 18:09:01
【问题描述】：

我只想通过 GatsbyImage 组件使用图像。

通常您使用<img src='./img.jpg'/> 来执行此操作。 GatsbyImage 是如何实现的，所以我可以使用 props 发送图像。

【问题讨论】：

输出是什么？有什么错误？ ChildComp 中有 img 数据吗？ useStaticQuery 是否获取正确的数据？
data 是null？如果是这样，这就是问题所在......好吧，尝试提供一个沙箱或类似的东西，用虚拟数据猜测你的结构有什么问题是不可能的没有显示代码结构（data.something 不在查询中，等等）
是的，所以我添加了问题的链接

标签： reactjs graphql gatsby gatsby-image

【解决方案1】：

如果你想使用GatsbyImage，你需要提供额外的 GraphQL 节点数据，Gatsby 使用它的转换器和锐器来推断。为此，您需要通过在gatsby-config.js 中设置以下 sn-p 来告诉 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 中测试并正常工作。

【讨论】：

【解决方案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} />

【讨论】：