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

我不是最好的正则表达式，但那些正则表达式查询本质上意味着，＆＃34;在收集＃＆＃34;之后给我任何文件。

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

1 个答案: