Question

我正在尝试查询棱柱形单一类型以通过gatsby-image显示照片。在GraphiQL中弄乱之后，我看到了图像URL，但是我不确定如何将其插入gatsby-image。有什么建议吗？

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

Answer 1

每当您在GraphQL中看到前缀all时，都应该假定它会返回一组东西。

在GraphQL中，我们可以看到_allDocuments.edges返回了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图像？

1 个答案: