使用 Gatsby 和 allImageSharp 上下文定位特定文件夹

Question

我是盖茨比的初学者。我尝试在特定文件夹中的网格中显示一批图像。我找到了一个脚本来做到这一点，但这是从我的data 文件夹中捕获所有图片，我的目的是针对特定的。我尝试了一个脚本，但是当我尝试过滤这个allImageSharp(filter: { sourceInstanceName: { eq: "media" } }) { 时，它不适用于allImageSharp。 当我尝试allImageSharp(filter: { id: { regex: "/media/" } }) { 时，只显示一个空白窗口，但这就像allImageSharp { 一样工作正常

javascript

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"
import Layout from "../components/layout"

const img_grid_style = {
  display: "grid",
  gridTemplateColumns: `repeat(auto-fill, 200px)`,
}

export default ({ data }) => (
  <div>
    <Layout title="IMAGE GRID"></Layout>
    <div style={img_grid_style}>
      {data.allImageSharp.edges.map(edge => (
        <Img fluid={edge.node.fluid} />
      ))}
    </div>
  </div>
)



export const query = graphql`
  query {
    allImageSharp(filter: { sourceInstanceName: { eq: "media" } }) {
      edges {
        node {
          id
          fluid(maxWidth: 200, maxHeight: 200) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
`

config

module.exports = {
  plugins: [
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        // Available options and their defaults:
        base64Width: 20,
        // forceBase64Format: ``, // valid formats: png,jpg,webp // don't work on OSX
        useMozJpeg: process.env.GATSBY_JPEG_ENCODER === `MOZJPEG`,
        stripMetadata: true,
        defaultQuality: 50,
        failOnError: true,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `media`,
        path: `./media/`,
      },
    },
  ],
}

Answer 1

将gatsby-source-filesystem 中的路径更改为：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `media`,
    path: `${__dirname}/media/`,

  },
},

上面的 sn-p 将匹配。 rootOfYourProject/media，将其更改为您的媒体路径，保留${__dirname}。

现在，您的文件系统可以通过media 过滤（不带斜线）。

export const query = graphql`
  {
    allFile(filter: {sourceInstanceName: {eq: "media"}}) {
      nodes {
        childImageSharp {
          fluid {
            base64
            tracedSVG
            srcWebp
            srcSetWebp
            originalImg
            originalName
          }
        }
      }
    }
  }
`

由于您不能在 GraphQL 游乐场 (localhost:8000/___graphql) 中使用片段，因此我使用了扩展版本，但是，一旦应用于您的代码，您应该使用 ...GatsbyImageSharpFluid。

allFile 或 allImageSharp 应该可以解决问题。

---

我已在this PR 中修复了您的项目。该查询正在正确检索结果，但是，您缺少一些嵌套对象来获取最终的流体图像：

export default ({ data }) => {
  return <div>
    <Layout title="IMAGE GRID FROM SPECIFIC FOLDER"></Layout>
    <div style={img_grid_style}>
      {data.allFile.edges.map(({ node }) => (
        <Img fluid={node.childImageSharp.fluid} />
      ))}
    </div>
  </div>
}