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

Posted 2023-03-08

【中文标题】使用 gatsby-plugin-image 从 GraphQL 导入和显示多个图像

【英文标题】：Importing and displaying multiple images from GraphQL using gatsby-plugin-image

【发布时间】：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”。 所以我认为我需要一些其他方式来显示数组中的一些图像。 非常感谢您的每一个帮助！

【参考方案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)