如何在地图函数中使用 gatsby-plugin-image？

如何解决如何在地图函数中使用 gatsby-plugin-image？

我刚开始使用 gatsby，在以下情况下无法弄清楚如何使用 gatsby-plugin-image：

const array  = [
    {
        title: "Image 1",image: "../images/image1.jpg"
    },{
        title: "Image 2",image: "../images/image2.jpg"
    },{
        title: "Image 3",image: "../images/image3.jpg"
    },{
        title: "Image 4",image: "../images/image4.jpg"
    }
]

export default Section = function(){

    return (
        <div className="bg-white w-full">

                    {array.map((item,index) => (

                        <div key={index} className="flex flex-col items-center lg:items-start">

                               <h2>{item.title}</h2>
                               //How do I use the image plugin here?

                        </div>

                    ))}
        </div>
    )

}

我尝试过但不起作用的方法：

{array.map((item,index) => (

    <div key={index} className="flex flex-col items-center lg:items-start">

           <h2>{item.title}</h2>
           <StaticImage src={item.image}/>

    </div>

))}

我知道我应该为此使用 GatsbyImage 和 GraphQl Query，但我不知道如何使用。我现在所做的是这种解决方法：

import image1 from "../images/image1 .jpg"
import image2 from "../images/image2.jpg"
import image3 from "../images/image3.jpg"
import image4 from "../images/image4.jpg"

const array  = [
    {
        title: "Image 1",image: image1 
    },image: image2
    },image: image3 
    },image: image4
    }
]

export default Section = function(){

    return (
        <div className="bg-white w-full">

                    {array.map((item,index) => (

                        <div key={index} className="flex flex-col items-center lg:items-start">

                               <h2>{item.title}</h2>
                               <img src={item.image} className="w-50 h-44 object-cover"></img>

                        </div>

                    ))}
        </div>
    )

}

但显然我没有利用 gatsby 图像插件，而且它更乏味。

我的配置：

module.exports = {
  plugins: [
    "gatsby-plugin-postcss","gatsby-plugin-image","gatsby-plugin-react-helmet","gatsby-plugin-sharp","gatsby-transformer-sharp",{
      resolve: "gatsby-source-filesystem",options: {
        name: "images",path: `${__dirname}/src/images/`,},__key: "images",],};

我找到了 this answer，但这并没有回答我如何遍历图像文件夹中的特定图像并添加其他信息（标题、描述、替代文本等）。据我所知，它只是显示了我将如何获得 1 张特定图像。

任何帮助将不胜感激！

解决方法

鉴于您的文件系统结构，我认为您最好的机会是使用 GatsbyImage 组件，正如您所说。这样的事情应该可以工作：

{
  allFile(filter: { sourceInstanceName: { eq: "images" } }) {
    edges {
      node {
        childImageSharp {
          relativePath
          gatsbyImageData(layout: FIXED)
        }
      }
    }
  }
}

请记住，page queries 仅在顶级组件（页面）中可用，如果您想在自定义组件（Section）中使用它，您可能需要向下钻取 props或使用 StaticQuery。

设置文件系统时，name 属性变为 sourceInstanceName，因此您可以创建自定义 GraphQL 查询来检索所有图像。

然后在您的组件中：

import * as React from 'react'
import { graphql } from 'gatsby'
import { GatsbyImage } from "gatsby-plugin-image"

const HomePage = ({data}) => {
  return (
    <div>
      {data.allFile.edges.node.map((item,index) => {
        return <div key={index}>
          <GatsbyImage image={item.childImageSharp.gatsbyImageData} alt="" />
       </div>

       })}

    </div>
  )
}

export const query = graphql`
  query HomePageQuery {
      allFile(filter: { sourceInstanceName: { eq: "images" } }) {
        edges {
          node {
            childImageSharp {
              gatsbyImageData(layout: FIXED)
            }
          }
        }
     }
  }
`

export default HomePage

当然，调整上面的代码片段以适应您的需求。

此时，您可以根据需要混合使用两个数组（array 和 GraphQL 数据）以获取 title，或者您可以自定义节点以添加自定义数据。

给定一个 JSON（或一个数组），例如：

{
  "content": [
    {
      "id": 1,"image": "../../path/to/your/image.png"
      "title": "an image"
    },{
      "id": 2,{
      "id": 3,]
}

然后，利用相同的循环，您可以执行以下操作：

import * as React from 'react'
import { graphql } from 'gatsby'
import { GatsbyImage } from "gatsby-plugin-image"
import JSONData from "../../content/My-JSON-Content.json"

const HomePage = ({data}) => {
  return (
    <div>
      {data.allFile.edges.node.map((item,index) => {
        if(JSONData.content.path.includes(item.relativePath)) {
          return <div key={index}>
            <h1>{JSONData.content.find(jsonElement=>jsonElement.path ==item.relativePath)}</h1>
            <GatsbyImage image={item.childImageSharp.gatsbyImageData} alt="" />
          </div>
        }
      })}
    </div>
  )
}

调整它以适应您的需求。

参考文献：