如何修改 Gatsby Starter Lightbox 以查询特定图片目录？答案

【问题标题】：How to modify Gatsby Starter Lightbox to query specific image directories?如何修改 Gatsby Starter Lightbox 以查询特定图片目录？
【发布时间】：2020-01-08 20:08:14
【问题描述】：

我正在尝试利用 Gatsby Starter Lightbox 中的 Lightbox 组件在不同的页面上显示一些图片库。

由于默认设置了starter组件，它只支持一个目录的图片，如gatsby-config.js中设置的那样

   `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `cars`,
        path: `${__dirname}/src/images/cars/`,
      },

然后在pages/index.js 中，它将所有图像传递给 Lightbox 组件。

<Lightbox images={data.allImageSharp.edges} />

    allImageSharp {
      edges {
        node {
          sizes(maxWidth: 1800) {
            ...GatsbyImageSharpSizes
          }
        }
      }
    }

所以我试图弄清楚如何根据不同的图像目录为其提供一组自定义图像。

我是 Gatsby 和 React 的新手，不知道如何按目录过滤 allImageSharp，但我确实找到了一种使用 allFile 的方法……虽然我在尝试使用它时遇到了类型错误。

我尝试了什么：

  gallery: allFile(filter: {relativeDirectory: {eq: "screenshots/producta"}, extension: {regex: "/(jpg)|(png)/"}}) {
    edges {
      node {
        id
        name
        relativeDirectory
        extension
      }
    }
  }

但在尝试将其用于：

<Lightbox images={props.data.gallery} />

我收到错误“TypeError：images.map 不是函数”

【问题讨论】：

标签： reactjs gatsby

【解决方案1】：

所以我想我可能已经想通了。我所做的似乎是有效的，但我会提醒我，我不知道它的解决方案有多“正确”或多好。

在我的问题的早期，我似乎一直在工作，但有一些事情发生了。

这是我所做的：

我更新了我的查询，所以它会为每个节点返回 childImageSharp，所以现在它返回的内容与 starter 包中的 allImageSharp 返回的内容相同。但是，此结构略有不同，因此我还必须更新 Lightbox.js 组件以正确引用这些更改。您会注意到我的查询有一个名为“fluid”的子字段，而不是“sizes”。这是因为我注意到 Gatsby 2.x 中不推荐使用“sizes”。不过，流体似乎返回相同的字段。因此，我将 Lightbox.js 中引用的所有“尺寸”更新为“流体”。

<Lightbox images={props.data.gallery.edges} />

    gallery: allFile(
      filter: {
        relativeDirectory: { eq: "screenshots/producta" }
        extension: { regex: "/(jpg)|(png)/" } 
      }
    ) {
      edges {
        node {
          id
          name
          relativeDirectory
          extension
          childImageSharp {
            fluid {
              base64
              tracedSVG
              aspectRatio
              src
              srcSet
              srcWebp
              srcSetWebp
              sizes
              originalImg
              originalName
              presentationWidth
              presentationHeight
            }
          }
        }
      }
    }

【讨论】：

【解决方案2】：

完全可以用gatsby-source-filesystem解析多个路径：

{
  resolve: `gatsby-source-filesystem`,
    options: {
      name: `cars`,
      path: `${__dirname}/src/images/cars/`,
    },
},
{
  resolve: `gatsby-source-filesystem`,
    options: {
      name: `productScreenshots`,
      path: `${__dirname}/src/screenshots/products/`,
    },
},

注意到name 属性了吗？它可用于准确查询该子集：

query getCarImages {
  allFile(
    filter: {sourceInstanceName: {eq: "cars"}}
  ) {
    nodes {
      childImageSharp {
        fluid {
          ...
        }
      }
    }
  }
}

或者，您可以将所有图像转储到src/images，将插件指向它一次，然后根据示例中提到的子目录路径进行过滤。

【讨论】：