Question

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

由于默认情况下已设置启动程序组件，因此它仅支持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不是函数”

Answer 1

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

在我的问题中，我似乎早已处于工作道路上，但是有一些问题。

这就是我所做的：

我更新了查询，以便为每个节点返回childImageSharp，因此现在返回的内容与从入门包中用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
            }
          }
        }
      }
    }

Answer 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中，一次将其指向插件，然后根据示例中提到的子目录路径进行过滤。

如何修改Gatsby Starter Lightbox以查询特定的图像目录？

2 个答案: