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

2024-01-11

我不太了解 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]为 null,而在本地该值将返回我需要的内容

我正在寻找查询的最佳方式single image. 不是多个图片。 如果我可以设置自己的 id,那么我就可以查询这些。


Update

我在中找到了一个例子gatsby-源文件系统文档 https://www.gatsbyjs.org/packages/gatsby-source-filesystem/#retrieving-the-remote-file-name-and-extension,但真的不知道如何将其添加到我的代码中


有了这个片段:

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

基本上你告诉你的 GraphQL 模式会发现images in src/assets/images文件夹,这样您就可以通过 GraphQL 查询该文件夹内的所有内容。您正在指定数据的来源。

From gatsby-源文件系统文档 https://www.gatsbyjs.org/packages/gatsby-source-filesystem/:

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

gatsby 和 graphql:过滤特定的单个图像 的相关文章

随机推荐