如何在地图功能中使用 gatsby-plugin-image？

Posted 2023-03-08

【中文标题】如何在地图功能中使用 gatsby-plugin-image？

【英文标题】：How can I use gatsby-plugin-image in a map function?

【发布时间】：2021-08-17 11:29:46

【问题描述】：

我刚开始使用 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 
    ,
    
        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",
    ,
  ],
;

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

任何帮助将不胜感激！

【参考方案1】：

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

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

请记住，page queries 仅在***组件（页面）中可用，如果您想在自定义组件 (Section) 中使用它，您可能需要深入了解 props 或使用 @ 987654322@.

当您设置文件系统时，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  />
       </div>

       )

    </div>
  )


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

export default HomePage

当然，调整上面的 sn-p 以使其适应您的需求。

此时，如果需要，您可以混合两个数组（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  />
          </div>
        
      )
    </div>
  )

调整它以适应您的需求。

参考资料：

https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/ https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#gatsbyimage https://www.gatsbyjs.com/docs/how-to/querying-data/page-query/ https://www.gatsbyjs.com/docs/how-to/querying-data/static-query/

【讨论】：

非常感谢您的回复！它有很大帮助。你说我可以将我的自定义数据添加到节点。我找不到怎么做，我该怎么做？如果我可以将必要的数据附加到文件本身，而不是稍后加入数据，那就太好了。

模式自定义与您的数据结构密切相关，因此很难用示例数据猜测代码应该是什么样子。检查gatsbyjs.com/docs/reference/graphql-data-layer/…

我现在唯一的数据是图像文件夹中的图像。那么如何为每个图像节点添加例如标题？您的链接告诉我，我也许可以创建一个包含所有必要数据的 JSON 文件，但我不必再次加入它们吗？再次感谢您的帮助！

找到了这个，它完美地回答了我的问题，它似乎有很多图像变慢的缺点，但我没有那么多，所以现在还好。 ***.com/a/56508865/16038414谢谢你的帮助，你把我送到了正确的方向:)

我同意我采用了您提出的 JSON 方法，并且效果更好。重复使用图像时，不必将我的数组从一个文件复制到另一个文件。我还不能投票，所以我接受了你的回答。再次感谢，你帮了我很多忙！