盖茨比graphql:过滤特定的单个图像 [英] gatsby & graphql : filtering for a specific single image

问题描述

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

I don't really understand graphql or gatsby that well but I believe all my images are loaded into graphql by putting this in my gatsby-config.js

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

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

I am then trying to query a specific image which I can do with

    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设置为更有意义?

And this returns what I want, but the id that I have to enter for this query is 7acfccd5-4aef-532b-8889-9d844ae2068b. Is this id even going to stay the same if I put it in my code? Is there a way to set the id to something more sensical?

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

If I save my query to a variable data, it turns out that on Netlify data.allImageSharp.edges[0] is null, while locally this value will return what I need

我正在寻找查询单个图像的最佳方法. 没有多个图像. 如果我可以设置自己的ID，则可以查询这些ID.

I'm looking for the best way to query a single image. Not multiple images. If I could set my own id's then I could query these.

更新

我在 gatsby源文件系统文档，但真的不知道如何将其添加到我的代码中

I found an example in the gatsby-source-filesystem documentation, but don't really know how to add it to my code

推荐答案

如果您的图像的路径为src/images/exampleImage.jpg，则可以通过使用 file 而不是查询来按图像名称查询 allImageSharp .

If you have an image with a path of src/images/exampleImage.jpg, you can query by the images name by querying using file rather than 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)/"}以查询任何扩展名类型的文件.

---

You can also replace {extension: {eq: "jpg"} with {extension: {regex: "/(jpg)|(jpeg)|(png)/"} to query files of any extension type.

这篇关于盖茨比graphql:过滤特定的单个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！