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

Posted 2023-02-21

【中文标题】Gatsby graphql 查询 GatsbyImage 以使用项目中的本地图像

【英文标题】：Gatsby graphql query for GatsbyImage to use a local image from project

【发布时间】：2022-01-23 18:09:01

【问题描述】：

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

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

【问题讨论】：

输出是什么？有什么错误？ ChildComp 中有 img 数据吗？ useStaticQuery 是否获取正确的数据？

data 是null？如果是这样，这就是问题所在......好吧，尝试提供一个沙箱或类似的东西，用虚拟数据猜测你的结构有什么问题是不可能的没有显示代码结构（data.something 不在查询中，等等）

是的，所以我添加了问题的链接

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