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

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
          }
        }
      }
    }

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

如果我将查询保存到变量 data，结果是 Netlify data.allImageSharp.edges[0] 为 null，而本地此值将 return 我需要什么

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

---

更新

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

Answer 1

使用此代码段：

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

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

来自gatsby-source-filesystem documentation：

The plugin creates File nodes from files. The various “transformer” plugins can transform File nodes into various other types of data e.g. gatsby-transformer-json transforms JSON files into JSON data nodes and gatsby-transformer-remark transforms markdown files into MarkdownRemark nodes from which you can query an HTML representation of the markdown.

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

Answer 2

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

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

---

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