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

How can I use gatsby-plugin-image in a map function?

我刚开始使用 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 查询,但我不知道如何使用。我现在做的是这个解决方法:

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 
    },
    {
        title: "Image 2",
        image: image2
    },
    {
        title: "Image 3",
        image: image3 
    },
    {
        title: "Image 4",
        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",
    },
  ],
};

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

如有任何帮助,我们将不胜感激!

鉴于您的文件系统结构,我认为您最好的机会是使用 GatsbyImage 组件,如您所说。这样的事情应该有效:

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

请记住 page queries are only available in the top-level components (pages), if you want to use it in a custom component (Section) you may need to drill down the props or using a 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,
      "image": "../../path/to/your/image.png"
      "title": "an image"
    },
    {
      "id": 3,
      "image": "../../path/to/your/image.png"
      "title": "an image"
    },
  ]
}

然后,利用相同的循环,您可以这样:

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>
  )
}

调整它以适应您的需要。

参考文献: