Gatsby / Graphql - 無法從查詢中顯示 img

Question

下面是我的代碼：

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


const ImageGallery = () => {


const data = useStaticQuery(graphql`
query {
  images: allFile(filter: { sourceInstanceName: {eq: "images" }}) {
    edges {
      node {
        relativePath
        childImageSharp {
          id
          fluid {
            originalImg
          }
        }
      }
    }
  }
}
`)

 // Filters all the images from "gallery-one"

 const galleryImages = data.images.edges.filter(edge => 
  edge.node.relativePath.startsWith("gallery-one")
 )

console.log(data)
console.log(galleryImages)


    return (
        <div>
            <h1>Gallery One</h1>
            {
             // Mapping over galleryImages array to display each image

              galleryImages.map((image) =>
                <div>
                // Returns relative path for each image
                {image.node.childImageSharp.fluid.originalImg}
                 // Returns nothing
                <Img fluid={image.node.childImageSharp.fluid.originalImg} />
                </div>
              )
            }
        </div>
    )
}


export default ImageGallery

對於 map 中的第一部分，它返回：

/static/3608211e3ce3f78486c9e344b92332d9/5f7bf/20171107_155145.jpg

/static/fccd9cdb1c9b525bfaf9282343d680a6/5f7bf/20171101_103124.jpg

/靜態/cdcbaebc030e210debc70bdff7a8d539/5f7bf/20171107_155126.jpg

/static/ef8708d7f536bd152c9ce98833d6d871/5f7bf/20171101_103218.jpg

/static/1c3b4e40cb5044e604009935b625fa38/5f7bf/20171101_103138.jpg

“gallery-one”文件夾中的每個圖像一個，但我不知道如何使用 Gatsby Img 顯示它。

我覺得這真的很接近，但我似乎無法弄清楚

fluid={image.node.childImageSharp.fluid.originalImg}

Answer 1

是的，你快到了。

當您使用gatsby-image查詢要顯示的圖像時，您有 2 個選項：

• 使用 GraphQL 片段：

  而不是使用originalImg您應該使用...GatsbyImageSharpFluid它將為fluid object 提供所需的所有信息。

• 查詢所有需要的數據。 在這種情況下，您應該使用：

   fluid (maxWidth: 800) { aspectRatio src srcSet sizes originalImg originalName }

  免責聲明：默認maxWidth為800px 。 如果不設置，它將采用默認值。

收集完所有信息后，需要將其傳遞給<Img>刪除您的originalImg ，例如：

fluid={image.node.childImageSharp.fluid}

有關詳細信息，請查看Gatsby Image API 文檔。