使用 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 defau...
评论
发表评论