Javascript 具有Gatsby和allImageSharp上下文的目标特定文件夹

我是《盖茨比》的初学者。我尝试在网格中显示特定文件夹中的一批图像。我找到了一个脚本来实现这一点，但这是从我的

data

文件夹中捕获所有图片，我的目标是一个特定的图片。我尝试了一个脚本，但当我尝试筛选这个脚本时，它不适用于

allImageSharp

。

allImageSharp（筛选：{sourceInstanceName:{eq:“media”}}）{

。 当我尝试

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

---

将

gatsby源文件系统中的路径更改为：

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

  },
},

上面的代码段将匹配。
rootOfYourProject/media
，将其更改为媒体路径，保持
${\uu dirname}

现在，您的文件系统可以通过
介质
（无斜杠）进行过滤

由于您不能在GraphQL游乐场中使用片段（
localhost:8000/\uuuuuu GraphQL
），因此我使用了扩展版本，但是，一旦应用到代码中，您应该使用
…GatsbyImageSharpFluid

allFile
或
allImageSharp
应该可以做到这一点


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

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

导出默认值（{data}）=>{
返回
{data.allFile.edges.map（{node}）=>(
))}
}
Thx用于返回，但存在问题流体无法处理文件终端重新运行
42:11错误无法查询“file”类型上的字段“fluid”。您是指“uid”吗？graphql/template string
当我尝试使用
allImageSharp
终端返回
39:29错误字段“sourceInstanceName”未通过类型ImageSharpFilterInput graphql/template strings定义。更新的代码段正在我的本地计算机上运行。代码未返回错误，但未显示任何内容。用于显示的代码：
导出默认值（{data}）=>（{data.allFile.nodes.map（node=>（））}）
检查拉动请求：已修复：）
export const query = graphql`
  {
    allFile(filter: {sourceInstanceName: {eq: "media"}}) {
      nodes {
        childImageSharp {
          fluid {
            base64
            tracedSVG
            srcWebp
            srcSetWebp
            originalImg
            originalName
          }
        }
      }
    }
  }
`

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