0

I'm building my website with GatsbyJS and graphsql. On my projects site I want to display a grid with Images that Link to further sites.

In order to do that I need to query multiple images. I created a folder in my images folder called "portfolio" and I want to query all the pictures in there.

I have used useStaticQuery before but I've read that currently it's only possible to query one instance so I tried doing it like this, but the code is not working. Any help? Thanks a lot!

import React from 'react'
import Img from 'gatsby-image'
import { graphql } from 'gatsby'

const Portfolio = ({data}) => (
 <>
{data.allFile.edges.map(image => {
  return (
    <div className="sec">
     <div className="portfolio">
        <div className="containerp">
           <Img className="centeredp" fluid={image.node.childImageSharp.fluid}/>
       </div>
     </div>
   </div>
      ) })}
  </>
    )


export default Portfolio

export const portfolioQuery = graphql`
{
  allFile(filter: {relativeDirectory: {eq: "portfolio"}}) {
    edges {
      node {
        id
        childImageSharp {
          fluid(maxWidth: 500) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}
`;
wischn
  • 21
  • 6

2 Answers2

1

Is it possible that you have some images missing, so none are rendering?

You could try checking that the image is present before rendering the Img, like this:

{image.node.childImageSharp && 
          <Img className="centeredp" fluid={image.node.childImageSharp.fluid}/>}

NB:

If you like, you could also make it a bit clearer by assigning your mapping object (edges) to a variable. It doesn't make that much difference in this example but can be clearer if you have more going on in your component.

E.g. 

const Portfolio = ({data}) => (
 <>
const images = data.allFile.edges

{images.map(image => {
  return (
    <div className="sec">
     <div className="portfolio">
        <div className="containerp">
           <Img className="centeredp" fluid={image.node.childImageSharp.fluid}/>
       </div>
     </div>
   </div>
      ) })}
  </>
    )
Antonia Cronin
  • 11
  • 1
  • 2
0

It's most likely that you probably need to set up your 'gatsby-source-filesystem' to recognize images within a query.

in your gatsby-config.js:

{ resolve: gatsby-source-filesystem, options: { name: images, path: ./src/images/, }, },

Robert O'Toole
  • 197
  • 1
  • 11