通过 GraphQL 和 Gatsby JS 从特定目录获取所有图像

Question

我有三个文件夹，其中包含将加载到多个轮播组件中的图像。这是文件夹结构，我会得到collection文件夹中的所有图像。

src/
   images/
     collection1/
     collection2/
     collection3/
     randomImage.jpg
     randomImage.svg
   components/
   pages/

我目前有这个查询：

export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        title
      }
    }
    heroFeaturedImage: imageSharp(id: { regex: "/war-room.jpg/" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
    allImageSharp {
      edges {
        node {
          ... on ImageSharp {
            sizes(maxWidth: 1250, quality: 90) {
              src
              srcSet
              originalName
            }
          }
        }
      }
    }
  }
`;

这是我的 gatsby-config.js：

module.exports = {
  siteMetadata: {
    title: 'Get all images in directory test',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `collection1`,
        path: `${__dirname}/src/images/collection1`,
      },
    },
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [`Roboto\:300,400,500,600`, `Montserrat\:300,400,600,800`],
      },
    },
  ],
};

它的问题是返回项目中的所有图像，而没有一种很好的方式来组织我想要的特定图像。

那么我怎样才能只从特定目录（例如collection1）中获取所有图像？

Answer 1

一些事情突然出现在我身上，虽然我不确定这是否能解决它：

1) gatsby-config.js 有点奇怪，你在同一组图像上两次调用 gatsby-source-filesystem。我认为您可能会失去对 collection1 集合的调用，据我所知，这是多余的。

2) allImageSharp 查询看起来正在做它应该做的事情，返回所有内容。你有没有试过这样的查询：

export const pageQuery = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        title
      }
    }
    collectionOneImages: imageSharp(id: { regex: "^\/collection1\/?(?:[^\/]+\/?)*$" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
    collectionTwoImages: imageSharp(id: { regex: "^\/collection2\/?(?:[^\/]+\/?)*$" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
    collectionThreeImages: imageSharp(id: { regex: "^\/collection3\/?(?:[^\/]+\/?)*$" }) {
      sizes(maxWidth: 1250, quality: 90) {
        ...GatsbyImageSharpSizes
      }
    }
  }
`;

我不是最擅长正则表达式，但那些正则表达式查询本质上的意思是，“在集合之后给我任何文件#”。