3

我不太了解graphql或gatsby，但我相信我的所有图像都通过将它放在我的gatsby-config.js中加载到graphql

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src/assets/images`),
      },
    },

然后我试图查询我可以使用的特定图像

    query MyQuery {
      allImageSharp(filter: {id: {eq: "7acfccd5-4aef-532b-8889-9d844ae2068b"}}) {
        edges {
          node {
            sizes {
              sizes
              srcSet
              src
              aspectRatio
            }
            id
          }
        }
      }
    }

这将返回我想要的，但我必须为此查询输入的 id 是7acfccd5-4aef-532b-8889-9d844ae2068b. 如果我把它放在我的代码中，这个 id 甚至会保持不变吗？有没有办法将 id 设置为更有意义的东西？

如果我将查询保存到一个变量data中，事实证明在Netlify data.allImageSharp.edges[0]上为空，而在本地这个值将返回我需要的

我正在寻找查询单个图像的最佳方法。不是多张图片。如果我可以设置自己的 id，那么我可以查询这些。

更新

我在gatsby-source-filesystem 文档中找到了一个示例，但真的不知道如何将它添加到我的代码中

4

2 回答 2

2

如果您有一个路径为 的图像，则可以通过使用file而不是allImageSharpsrc/images/exampleImage.jpg来查询图像名称。

query HeaderQuery {
  exampleImage: file(
    extension: {eq: "jpg"},
    name: {eq: "exampleImage"}
  ) {
    childImageSharp {
      fluid {
        src
        srcSet
        sizes
        srcSetWebp
      }
    }
  }
}

您还可以替换{extension: {eq: "jpg"}为{extension: {regex: "/(jpg)|(jpeg)|(png)/"}查询任何扩展类型的文件。

于 2020-05-30T23:56:46.407 回答
2

有了这个片段：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: path.join(__dirname, `src/assets/images`),
  },
},

基本上，您是在告诉您的 GraphQL 架构将images在src/assets/images文件夹中找到，这样您就可以通过 GraphQL 查询该文件夹中的所有内容。您正在指定数据的来源。

来自gatsby-source-filesystem 文档：

该插件从文件创建文件节点。各种“转换器”插件可以将 File 节点转换为各种其他类型的数据，例如 gatsby-transformer-json 将 JSON 文件转换为 JSON 数据节点，而 gatsby-transformer-remark 将 markdown 文件转换为 MarkdownRemark 节点，您可以从中查询 HTML 表示降价。

回答您的问题，当然，您可以对图像具有的任何属性或节点进行过滤和排序，例如名称、路径、扩展名等。/___graphql当您运行gatsby develop命令时，您可能会在路径下找到一个有用的自动完成工具来查询. 这将帮助您检查可以查询和过滤哪些参数。

于 2020-05-18T05:03:37.320 回答