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

Posted 2023-03-08

【中文标题】通过 GraphQL 和 Gatsby JS 从特定目录获取所有图像

【英文标题】：Get all images from specific directory via GraphQL and Gatsby JS

【发布时间】：2018-10-12 23:06:08

【问题描述】：

我有三个文件夹，其中包含将加载到多个轮播组件中的图像。这是文件夹结构，我会得到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）中获取所有图像？

【参考方案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
      
    
  
`;

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

【讨论】：

感谢您的回复@staypuftman。我更新为查询，但它只返回一个图像，而不是他文件夹中的 3 或 4 个图像。

@jkjmr6 - 我编辑了正则表达式以查找更多文件，试试看。我认为你只需要稍微调整一下正则表达式就可以了。