如何查询 gatsby-image？

Question

我正在尝试通过 gatsby-image 查询一个 prismic single type 来显示照片。在 GraphiQL 中弄乱之后，我看到了图像 url 但我不确定如何将它插入到 gatsby-image 中。有什么建议吗？

  <Layout 
    location={`home`}
    image={data.prismic._allDocuments.edges.node.hero_image.childImageSharp.fluid}
  >

Answer 1

任何时候在 GraphQL 中看到前缀 all 时，您都应该假设它会 return 一组东西。

在 GraphQL 中我们可以看到 _allDocuments.edges return 是 edges 的 array。如果我们想显示该数组中的所有内容，我们需要对其进行映射。

如果我们知道我们想要的单个事物的索引，我们可以直接使用bracket notation访问它。

// ./pages/index.js

import React from "react"
import Layout from "../components/layout"


const IndexPage = ({data}) => {
  return (
  <Layout>
    <ul>
      {data.allFile.edges.map((edge) => (
        <li>{edge.node.name}</li>
      ))}
    </ul>
  </Layout>
)}

export default IndexPage


export const query = graphql`
  query HomePageQuery {
    allFile(filter: {relativePath: {regex: "/png$/"}}) {
      edges {
        node {
          id
          name
          relativePath
          publicURL
          childImageSharp {
            fixed(width: 111) { 
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`

然后你可以import Img from "gatsby-image"并将相关查询值传递给<Img />组件的固定或流体属性。

// ./pages/index.js

import React from "react"
import Layout from "../components/layout"
import Img from "gatsby-image"


const IndexPage = ({data}) => {
  return (
  <Layout>
      {data.allFile.edges.map((edge) => (
        <Img fixed={edge.node.childImageSharp.fixed} />
      ))}
  </Layout>
)}

export default IndexPage



export const query = graphql`
  query HomePageQuery {
    allFile(filter: {relativePath: {regex: "/png$/"}}) {
      edges {
        node {
          id
          name
          relativePath
          publicURL
          childImageSharp {
            fixed(width: 111) { 
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  }
`

如何查询 gatsby-image？

How do I query for gatsby-image?

reactjs

gatsby

prismic.io

gatsby-image