Как запросить несколько изображений с помощью gatsby-image? - PullRequest
2 голосов
/ 04 июня 2019

У меня есть 16 изображений, которые я хочу вывести на сайт в виде сетки.

Для этого я использую следующие плагины:

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

Я прочитал документацию и, насколько я знаю, он только продемонстрировал, как запросить одно изображение.

, например

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

Но как бы я поступил так, если бы у меня было 16 изображений? Написание 16 отдельных запросов кажется довольно громоздким и будет трудным для чтения в будущем.

Я видел этот код в документах, ссылающихся на несколько изображений, но у меня возникают проблемы при попытке доступа к самим изображениям.

, например

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

Моя структура папок выглядит следующим образом:

--- package.json

--- src

------ изображения

--------- 16 изображений

------ страниц

--------- страница, на которой я хочу отобразить 16 изображений в

и т.д.

Спасибо.

1 Ответ

1 голос
/ 04 июня 2019

Помогите вам разобраться в GraphiQL, особенно в Explorer. Хотя помните, что фрагменты Gatsby не будут работать в GraphiQL.

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

Таким образом, вышеприведенное должно быть равнозначно следующему запросу, который будет работать в GraphiQL

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

Тогда ваш компонент может использовать этот же запрос и отобразить результаты следующим образом:

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

Вы можете легко зациклить результирующий массив узлов imageSharp, возвращенных из запроса в data.allImageSharp.edges.map. Затем передайте свойство fluid каждого узла в качестве реквизита fluid gatsby-image.

Примечание. При этом отображается каждый imageSharp узел в вашем проекте, что может быть, а может и не быть тем, чего вы хотите достичь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...