Gatsby 从数据中获取具有相对路径的图像文件夹

Question

我正在制作一个 Gatsby 静态网站，但在使用 GraphQL 时遇到了问题。

我正在尝试使用 GraphQL 查询文件夹中的所有图像。我的数据有路径：

"images" : "./relimages/vila-franceza",
"cardimages" : "./relimages/main-page-card-images/vila-franceza.jpg",

获取 cardimages 图像可以正常工作。我可以随心所欲地使用 gatsby 图像来操作它。

但是当我查询 images （这是一个文件夹）时，我只得到文件夹的路径。

这是我的查询：

query flagquery {
  allDataRoJson {
    edges {
      node {
        images
        cardimages {
          id
          childImageSharp {
            fluid {
              originalImg
            }
          }
        }
      }
    }
  }
}

在我的查询中，图像以字符串形式返回。我怎样才能让它可以被graphQL查询，而不是用childImageSharp属性获取一组图像，就像我指定一个图像的情况一样。

这是 GraphiQL 中查询的输出

{
  "data": {
    "allDataRoJson": {
      "edges": [
        {
          "node": {
            "images": "./relimages/vila-franceza",
            "cardimages": {
              "id": "2a1fca39-6192-5e09-b913-43c5bf48966f",
              "childImageSharp": {
                "fluid": {
                  "originalImg": "/static/30337f0e47a254b68d443be671031647/0a89a/vila-franceza.jpg"
                }
              }
            }
          }
        },
        {
          "node": {
            "images": "./relimages/vila-franceza",
            "cardimages": {
              "id": "2a1fca39-6192-5e09-b913-43c5bf48966f",
              "childImageSharp": {
                "fluid": {
                  "originalImg": "/static/30337f0e47a254b68d443be671031647/0a89a/vila-franceza.jpg"
                }
              }
            }
          }
        },
        {
          "node": {
            "images": "./relimages/vila-franceza",
            "cardimages": null
          }
        }
      ]
    }
  }
}

Answer 1

假设您想获取“images”文件夹中的所有图像并使用 gatsby-image 将它们输出到您的页面上，我就是这样做的：

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

export default ({ data }) => (
<Layout>
  {data.allFile.edges.map(({ node }, i) => (
    <Img
      key={i}
      fluid={node.childImageSharp.fluid}
      alt={node.name}
    />
  ))}
</Layout>
)

export const query = graphql`
  query {
    allFile(
      filter: {
        extension: { regex: "/(jpg)|(png)|(tif)|(tiff)|(webp)|(jpeg)/" }
        absolutePath: { regex: "/images/" }
      }
    ) {
      edges {
        node {
          name
          childImageSharp {
            fluid(maxWidth: 915, quality: 70) {
              aspectRatio
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    }
  }
`

我的图片文件夹位于：src/images