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

我不太了解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
      }
    }
  }
}

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 in my code? Is there a way to set the id to something more sensical?

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

评论
xhic
xhic

使用以下代码段:

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

Basically you are telling your GraphQL schema that will find images in src/assets/images folder so you will be able to query all the content inside this folder via GraphQL. You are specifying the source for your data.

From gatsby-source-filesystem documentation:

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

Answering your question, of course, you can filter and sort for any property or node that your image has, such as name, path, extension, etc. You may find a useful and autocompletion tool for your queries under /___graphql path when you run a gatsby develop command. This will help you to check out what parameters can be queried and filtered.

点赞
评论