web-dev-qa-db-ja.com

gatsby-imageで複数の画像をクエリするにはどうすればよいですか？

グリッド形式でWebサイトにレンダリングしたい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

------画像

--------- the 16画像

------ページ

--------- 16個の画像をレンダリングするページ

等.

ありがとうございました。

reactjsgatsby
8
Bee Wai

GraphiQLを試してみると、特にExplorerにとって役立つはずです。ただし、GatsbyフラグメントはGraphiQLでは機能しないことに注意してください。

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

したがって、上記はwillが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
          }
        }
      }
    }
  }
`

data.allImageSharp.edges.mapのクエリから返されたimageSharpノードの配列を簡単にループできます。次に、各ノードのfluidプロパティをfluidプロパティとしてgatsby-imageに渡します。

注：これにより、プロジェクト内のevery imageSharpノードがレンダリングされます。これは、目的とは異なる場合があります。

4
ksav