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

Question

我想通过 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",
  ]
};

Answer 1

试试这个：

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 提供正确的数据，你必须访问 childrenImageSharp 和 gatsbyImageData.

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

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

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

graphql

mapping

gatsby

gatsby-image

graphiql