使用 gatsby-plugin-image 从 GraphQL 导入和显示多个图像答案

【问题标题】：Importing and displaying multiple images from GraphQL using gatsby-plugin-image使用 gatsby-plugin-image 从 GraphQL 导入和显示多个图像
【发布时间】：2021-12-31 11:39:23
【问题描述】：

您好，我正在尝试向我的网站添加 instagram 供稿，但我找不到使其工作的方法。我以前没有真正使用过这些工具，所以我不太了解它，但它指出了我认为我在 GraphQL 中有提要的地方。现在的问题是我不知道如何显示图像。任何人都可以帮忙吗？

这是一些代码：

import React from "react"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { useStaticQuery, graphql } from "gatsby"


const CapabilityList = () => {
  const data = useStaticQuery(graphql`
  query InstagramQuery {
    allInstagramContent {
      edges {
        node {
          localImage {
            
            childImageSharp {
              fixed(width: 200, height: 200) {
                ...GatsbyImageSharpFixed
              }
          }
        }
      }
    }
  }
}
`)
  let arrayOfInstaImages = getImage(data, 'allInstagramContent.edges')

  return (
      <div style={{ maxWidth: `900px`, marginBottom: `1.45rem`, display: 'flex' }}>
        {arrayOfInstaImages.map((item, i) => {
          return (
            <div key={i} style={{ width: "200px", height: "200px" }}>
              <GatsbyImage image={item.node.localImage.childImageSharp.fixed} />
            </div>)
        })}
      </div>

  )
}

export default CapabilityList;

这不起作用并显示错误：类型“IGatsbyImageData”上不存在属性“map”。
所以我认为我需要一些其他方式来显示数组中的一些图像。

非常感谢您的每一个帮助！

【问题讨论】：

标签： javascript reactjs graphql gatsby gatsby-image

【解决方案1】：

getImage 是一个帮助函数（你并不真的需要它），它返回给定路径的图像对象。不是数组：

安全地获取gatsbyImageData 对象。它接受几种不同的各种对象，并且是 null 安全的，如果对象返回 undefined 已通过，或任何中间子级为undefined。

简单地做：

  return (
      <div style={{ maxWidth: `900px`, marginBottom: `1.45rem`, display: 'flex' }}>
        {data.allInstagramContent.edges.node.map((item, i) => {
          return (
            <div key={i} style={{ width: "200px", height: "200px" }}>
              <Img image={item.node.localImage.childImageSharp.fixed} />
            </div>)
        })}
      </div>
  )

注意：Img 代表gatsby-image

您的可迭代数据数组是node，因此您应该在那里查找并循环（您可以通过console.log 它来帮助您理解数据结构）。

除了错误的循环之外，您的代码中的主要问题是您在使用 GatsbyImage 组件（从 v3 开始，@ 987654334@)。您可以通过以下方式查看迁移详细信息：https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/

如果您想使用GatsbyImage，您的代码应如下所示：

import React from "react"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { useStaticQuery, graphql } from "gatsby"


const CapabilityList = () => {
  const data = useStaticQuery(graphql`
  query InstagramQuery {
    allInstagramContent {
      edges {
        node {
          localImage {
           gatsbyImageData(
             width: 200
             placeholder: BLURRED
             formats: [AUTO, WEBP, AVIF]
           )
          }
        }
      }
    }
  }
}
`)

      return (
          <div style={{ maxWidth: `900px`, marginBottom: `1.45rem`, display: 'flex' }}>
            {data.allInstagramContent.edges.node.map((item, i) => {
              return (
                <div key={i} style={{ width: "200px", height: "200px" }}>
                  <GatsbyImage image={item.node.localImage.childImageSharp.gatsbyImageData} />
                </div>)
            })}
          </div>
      )
}

export default CapabilityList;

注意：Img 或 GatsbyImage 的使用将严格依赖于您安装的软件包和您的 gatsby-config.js 结构。检查一下，因为您正在混合概念。

两个组件相似，但它们接受不同的图像props。虽然GatsbyImage 接受包含gatsbyImageData 的image 属性，但Img 接受fixed 的fixed 属性childImageSharp（流动或固定）数据，因此查询会因组件而略有不同使用它应该是配置。

当然，这是一个近似值。根据您的数据结构，您的 GraphQL 结构可能会略有不同。检查 GraphiQL 操场上的查询 (localhost:8000/___graphql)

【讨论】：