Question

我正在建立一个Gatsby静态网站，而GraphQL遇到了问题。

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

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

获取 cardimages 图片可以正常工作。我可以根据需要使用gatsby图像对其进行操作。

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

这是我的查询：

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

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

1 个答案: