Gatsby get image folder with relative path from data

Question

I am making a Gatsby static website and I'm having trouble with GraphQL.

I am trying to query all images in a folder using GraphQL. My data has the path:

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

Getting the cardimages image works properly. I can manipulate it with gatsby image however I want.

But when I query for images (which is a folder), I only get the path to the folder.

Here's my query:

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

In my query, images returns as a string. How can i instead get it to be queryable by graphQL to instead get an array of images with the childImageSharp property like in the case where i specify the one image.

Here's the output of the query in 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

Assuming you want to get all the images in the "images" folder and output them on your page with gatsby-image, this is how I do it:

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

My images folder was located: src/images