Question

我不太了解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，则可以查询这些ID。

更新

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

Answer 1

使用此代码段：

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

基本上，您是在告诉您的GraphQL模式将在images文件夹中找到src/assets/images，以便您能够通过GraphQL查询此文件夹中的所有内容。您正在指定数据源。

来自gatsby-source-filesystem documentation：

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

当然，回答问题后，您可以对图像所具有的任何属性或节点（例如名称，路径，扩展名等）进行过滤和排序。您可以在{{1 }}运行/___graphql命令时的路径。这将帮助您检查可以查询和过滤哪些参数。

Answer 2

如果您的图像的路径为src/images/exampleImage.jpg，则可以使用文件而不是 allImageSharp 进行查询，从而按图像名称进行查询。

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

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

gatsby和graphql：过滤特定的单个图像

2 个答案: