如何使用 GraphiQl 在 Gatsby 中映射出多个图像?

How can I map out multiple images in Gatsby with GraphiQl?

我想通过 GraphiQl 从网页上的特定文件夹中查询多个图像。

我尝试了多种方法,但无法显示图像。但是,我可以显示 1 张图片(没有映射),但不能显示多张图片。

我还可以在网页上显示图片的id或base,以显示所有这些的列表。但是如果我尝试使用实际图像,我会在控制台中收到以下错误消息:

Warning: Failed prop type: The prop `alt` is marked as required in `J`, but its value is `undefined`.
    at J (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:615:13)
    at eval (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:635:13)
    at MainImage
    at G (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:608:13)

该页面显示正确,但没有图像。我的代码有问题吗?

import * as React from "react"
import {graphql} from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import Layout from "../../components/layout"

const JewelryPage = ({ data }) => {
  const image = getImage(data.allFile.childrenImageSharp)
  return (
    <Layout pageTitle="Jewelry">
        <h1>Jewelry</h1>
      {data.allFile.edges.map(image => (
         <GatsbyImage image={image} />
      ))}
    </Layout>
  )
}

export default JewelryPage

export const query = graphql `
query {
   allFile(filter: {relativeDirectory: {eq: "content/portfolio/jewelry"}}) {
    edges {
      node {
        childrenImageSharp {
          gatsbyImageData(
            width: 800
            placeholder: DOMINANT_COLOR
            formats: [AUTO, WEBP, AVIF]
          )
        }
        base
        id
      }
    }
  }
}
`

我的 gatsby-config 看起来像这样

module.exports = {
  siteMetadata: {
    title: ``,
    siteUrl: ``
  },
  plugins: [{
    resolve: 'gatsby-plugin-google-analytics',
    options: {
      "trackingId": ""
    }
  }, "gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-sitemap", {
    resolve: 'gatsby-plugin-manifest',
    options: {
      "icon": `${__dirname}/src/images/icon.png`
    }
  }, "gatsby-plugin-mdx", "gatsby-plugin-sharp", "gatsby-transformer-sharp",
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "images",
      "path": `${__dirname}/src/images/`
    }
  },
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "pages",
      "path": `${__dirname}/src/pages/`
    }
  },
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "jewelry",
      "path": `${__dirname}/src/images/content/portfolio/jewelry/`
    }
  },
  {
    resolve: `gatsby-plugin-google-fonts`,
    options: {
      fonts: [
        `Cormorant\:200,300,300i,400,500,600`,
        `Forum\:200,400,500,600`
      ],
      display: 'swap'
    }
  },
    "gatsby-plugin-netlify",
  ]
};

试试这个:

const JewelryPage = ({ data }) => {
  return (
    <Layout pageTitle="Jewelry">
        <h1>Jewelry</h1>
      {data.allFile.edges.node.map(image => {
       console.log("image", image);
       return <GatsbyImage image={image?.childrenImageSharp?.gatsbyImageData} alt="some alt text"/>
      })}
    </Layout>
  )
}

image 在你的循环中,代表 node,所以为了向 GatsbyImage 提供正确的数据,你必须访问 childrenImageSharpgatsbyImageData.

另外,如错误提示,alt属性是GatsbyImage的属性所必需的,您必须为每个图像提供它。