web-dev-qa-db-fra.com

Comment interroger plusieurs images avec gatsby-image?

J'ai 16 images que je souhaite afficher sur un site Web sous forme de grille.

J'utilise les plugins suivants pour cela:

  • gatsby-image
  • gatsby-source-filesystem
  • gatsby-plugin-sharp
  • gatsby-transformer-sharp

J'ai lu la documentation et pour autant que je sache, cela n'a montré que comment interroger une seule image.

par exemple.

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

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

Mais comment procéder si j'avais 16 images? L'écriture de 16 requêtes distinctes semble plutôt lourde et serait difficile à lire à l'avenir.

J'ai vu ce code dans les documents faisant référence à plusieurs images, mais j'ai du mal à accéder aux images elles-mêmes.

par exemple.

export const squareImage = graphql`
  fragment squareImage on File {
    childImageSharp {
      fluid(maxWidth: 200, maxHeight: 200) {
        ...GatsbyImageSharpFluid
      }
    }
  }
`

export const query = graphql`
  query {
    image1: file(relativePath: { eq: "images/image1.jpg" }) {
      ...squareImage
    }

    image2: file(relativePath: { eq: "images/image2.jpg" }) {
      ...squareImage
    }

    image3: file(relativePath: { eq: "images/image3.jpg" }) {
      ...squareImage
    }
  }
`

Ma structure de dossiers est la suivante:

--- package.json

--- src

------images

--------- les 16 images

------ pages

--------- la page où je veux rendre les 16 images

etc.

Je vous remercie.

reactjsgatsby
8
Bee Wai

Avoir un coup d'œil dans GraphiQL devrait vous aider, en particulier l'explorateur. N'oubliez pas que les fragments Gatsby ne fonctionneront pas dans GraphiQL.

{
  allImageSharp {
    edges {
      node {
        id
        fluid(maxWidth: 200, maxHeight: 200) {
            ...GatsbyImageSharpFluid
        }
      }
    }
  }
}

Donc, ce qui précède devrait être égal à quelque chose comme la requête suivante qui va fonctionner dans GraphiQL

{
  allImageSharp {
    edges {
      node {
        id
        fluid(maxHeight: 200, maxWidth: 200) {
          src
          srcSet
          base64
          aspectRatio
          originalImg
          sizes        
        }
      }
    }
  }
}

Ensuite, votre composant peut utiliser cette même requête et afficher les résultats comme ceci:

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

const imgGridStyle = {
  display: 'grid',
  gridTemplateColumns: `repeat(auto-fill, 200px)`
};

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <div style={imgGridStyle}>
      {data.allImageSharp.edges.map(Edge => 
        <Img fluid={Edge.node.fluid} />
      )}
    </div>
  </div>
)

export const query = graphql`
  query {
    allImageSharp {
      edges {
        node {
          id
          fluid(maxWidth: 200, maxHeight: 200) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
`

Vous pouvez facilement parcourir le tableau de nœuds imageSharp résultant de la requête dans data.allImageSharp.edges.map. Passez ensuite la propriété fluid de chaque nœud, en tant que prop fluid à gatsby-image.

Remarque: Cela rend chaque nœud imageSharp dans votre projet, ce qui peut ou non être ce que vous souhaitez réaliser.

4
ksav