通过Graphql成功地查询Contentful，以便在我的gatsby项目中访问和显示图像

 

使用gatsby-image（v2）

import * as React from "react"

import { graphql } from "gatsby"

import Img from "gatsby-image"

function MainApp( {data} ){

return(

<h1>

{data.allContentfulHeroImage.edges.map(({ node },index) => <Img fluid={node.heroImage.fluid} alt = {``} key = {``} />)}

</h1>

)

}

export default MainApp;

export const query = graphql`

query MyQuery {

allContentfulHeroImage { 

edges {

node {

heroImage {

fluid (maxWidth:2000){

...GatsbyContentfulFluid

}

}

}

}

}

}`

使用gatsby-plugin-image（v3）

import * as React from "react"

import { graphql } from "gatsby"

import { GatsbyImage } from "gatsby-plugin-image"

function MainApp( {data} ) {

  return (

    <>  

      {data.allContentfulHeroImage.edges.map(({ node }, index) => <GatsbyImage image={node.heroImage.gatsbyImageData} alt={``} key={``} />)}

    </>

  )

}

export default MainApp;

export const query = graphql 

`query MyQuery {

  allContentfulHeroImage {

    edges {

      node {

        heroImage {

           gatsbyImageData(

             width: 200

             placeholder: BLURRED

             formats: [AUTO, WEBP, AVIF]

           )

          }

        }

      }

    }

  }

}`