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

Question

您好，我正在尝试向我的网站添加 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;

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

非常感谢您的帮助！

Answer 1

getImage 是一个辅助函数（您并不真正需要它），returns 给定路径的图像对象。不是数组：

Safely get a gatsbyImageData object. It accepts several different sorts of objects, and is null-safe, returning undefined if the object passed, or any intermediate children are 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 组件时对 Gatsby Image（来自版本 2，Img from gatsby-image）使用了 GraphQL 查询结构（从 v3 开始，GatsbyImage from gatsby-image-plugin）。您可以在以下位置查看迁移详细信息：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 接受 childImageSharp 的 fluid/fixed 道具（流动或固定) 数据，因此查询将根据使用的组件略有不同，因此应该是配置。

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

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

Importing and displaying multiple images from GraphQL using gatsby-plugin-image

javascript

reactjs

graphql

gatsby

gatsby-image